v3.1.0

This method was added in 30803fc.

.github/workflows/build.yml

@@ -3,28 +3,24 @@
 
 name: Build Python package and docs
 
-on: 
-  push:
-    tags-ignore:
-      - '**'
-  pull_request:
-    paths:
-      - doc/**
-      - src/**
-      - poetry.lock
-      - poetry.toml
-      - pyproject.toml
-      - setup.cfg
-
+on: [ push, pull_request ]
 
 jobs:
   build:
 
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        python-version: [3.8, 3.9]
+
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
       with:
         submodules: recursive
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v1
+      with:
+        python-version: ${{ matrix.python-version }}
     - name: Install dependencies
       run: |
         pip install poetry
@@ -39,7 +35,7 @@ jobs:
       run: poetry run doc8
     - name: Build html docs for Read the Docs
       run: poetry run make -C doc html
-    - name: Install IDE docs dependencies
+    - name: Instal IDE docs dependencies
       run: |
         sudo apt-get update
         sudo apt-get install dvisvgm preview-latex-style texlive texlive-fonts-extra texlive-latex-extra

.github/workflows/jedi.yml

@@ -1,30 +0,0 @@
-name: pybricks_jedi
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    if: github.ref_type != 'tag'
-    runs-on: ubuntu-22.04
-    steps:
-    - uses: actions/checkout@v3
-    - run: pipx install poetry
-    - run: poetry install
-      working-directory: ./jedi
-    - run: poetry run pytest -vv
-      working-directory: ./jedi
-
-  publish:
-    if: github.ref_type == 'tag' && startsWith(github.ref_name, 'pybricks_jedi/')
-    runs-on: ubuntu-22.04
-    steps:
-    - uses: actions/checkout@v3
-    - run: pipx install poetry
-    - run: poetry install
-      working-directory: ./jedi
-    - run: poetry build
-      working-directory: ./jedi
-    - run: poetry publish
-      working-directory: ./jedi
-      env:
-        POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_PYBRICKS_JEDI_TOKEN }}

.github/workflows/publish-ide-docs.yml

@@ -7,17 +7,17 @@ on:
 
 jobs:
   publish_ide_docs:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     steps:
     - name: Ubuntu packages
       run: |
         sudo apt-get update
         sudo apt-get install -y dvisvgm preview-latex-style texlive texlive-fonts-extra texlive-latex-extra
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
       with:
         submodules: recursive
     - name: Set up Python 3.8
-      uses: actions/setup-python@v4
+      uses: actions/setup-python@v1
       with:
         python-version: 3.8
     - name: Install dependencies
@@ -25,8 +25,8 @@ jobs:
         pip install poetry
         poetry run python -m pip install --upgrade pip
         poetry run python -m pip install --upgrade setuptools
-        poetry install --only=doc
-    - uses: actions/setup-node@v3
+        poetry install
+    - uses: actions/setup-node@v1
       with:
         node-version: '14.x'
         registry-url: 'https://registry.npmjs.org'

.github/workflows/publish-images.yml

@@ -1,23 +0,0 @@
-name: Release @pybricks/images
-
-on:
-  push:
-    tags: 
-    - '@pybricks/images/**'
-
-jobs:
-  publish_ide_docs:
-    runs-on: ubuntu-22.04
-    steps:
-    - uses: actions/checkout@v3
-    # Setup .npmrc file to publish to npm
-    - uses: actions/setup-node@v3
-      with:
-        node-version: '16.x'
-        registry-url: 'https://registry.npmjs.org'
-    - run: ./build.py
-      working-directory: npm/images
-    - run: yarn publish
-      working-directory: npm/images/build
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.github/workflows/publish-jedi.yml

@@ -1,23 +0,0 @@
-name: Release @pybricks/jedi
-
-on:
-  push:
-    tags: 
-    - '@pybricks/jedi/**'
-
-jobs:
-  publish_jedi:
-    runs-on: ubuntu-22.04
-    steps:
-    - uses: actions/checkout@v3
-    # Setup .npmrc file to publish to npm
-    - uses: actions/setup-node@v3
-      with:
-        node-version: '16.x'
-        registry-url: 'https://registry.npmjs.org'
-    - run: ./build.py
-      working-directory: npm/jedi
-    - run: yarn publish
-      working-directory: npm/jedi/build
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.github/workflows/release-to-pypi.yml

@@ -0,0 +1,22 @@
+name: Release to PyPI
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-20.04
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-python@v2
+      with:
+        python-version: 3.8
+    - uses: abatilo/actions-poetry@v2.0.0
+      with:
+        poetry-version: 1.1.6
+    - run: poetry install
+    - run: poetry build
+    - run: poetry publish
+      env:
+        POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_TOKEN }}

.github/workflows/release.yml

@@ -1,45 +0,0 @@
-on:
-  push:
-    tags:
-    - 'v3.*'
-
-name: Create release on GitHub and PyPI
-
-permissions:
-  contents: write
-
-jobs:
-  create_release:
-    name: Create release on GitHub
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          submodules: true
-          fetch-depth: 0
-      - name: Get tag
-        run: echo "GITHUB_TAG=${GITHUB_REF#*refs/tags/}" >> $GITHUB_ENV
-      - name: Create release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          tag: ${{ github.ref_name }}
-        run: |
-          if [[ "${{ contains(env.GITHUB_TAG, 'a') || contains(env.GITHUB_TAG, 'b') || contains(env.GITHUB_TAG, 'c') }}" == "true" ]]; then
-            PRERELEASE_FLAG="--prerelease"
-          else
-            PRERELEASE_FLAG=""
-          fi
-          gh release create "$tag" \
-              --repo="$GITHUB_REPOSITORY" \
-              --title="${tag#v}" \
-              -F CHANGELOG.md \
-              $PRERELEASE_FLAG
-  build_and_publish:
-    runs-on: ubuntu-22.04
-    steps:
-    - uses: actions/checkout@v3
-    - run: pipx run poetry build
-    - run: pipx run poetry publish
-      env:
-        POETRY_PYPI_TOKEN_PYPI: ${{ secrets.PYPI_TOKEN }}

.gitignore

@@ -26,9 +26,8 @@ build/
 build-*/
 _build/
 
-# Tests
+# Test failure outputs
 ######################
-.pytest_cache/
 tests/*.exp
 tests/*.out
 
@@ -58,10 +57,3 @@ genrst/
 # Virtual environment
 ######################
 .venv/
-.python-version
-
-# Generated LDRAW output
-######################
-stderr-ldview
-stdout-ldview
-LPub3D/

.readthedocs.yaml

@@ -0,0 +1,22 @@
+# .readthedocs.yaml
+# Read the Docs configuration file
+# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
+#
+# Settings in the readthedocs online dashboard will be ignored.
+
+# Required
+version: 2
+
+# Build documentation in the doc/main directory with Sphinx
+sphinx:
+   configuration: doc/main/conf.py
+
+# Build your docs in additional formats such as PDF
+formats:
+   - pdf
+
+# Set the version of Python and requirements required to build the docs
+python:
+   version: 3.8
+   install:
+   - requirements: rtd-requirements.txt

.readthedocs.yml

@@ -1,24 +0,0 @@
-# .readthedocs.yaml
-# Read the Docs configuration file
-# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
-
-# Required
-version: 2
-
-build:
-  os: "ubuntu-22.04"
-  tools:
-    python: "3.10"
-  jobs:
-    post_create_environment:
-      - pip install poetry
-    post_install:
-      - VIRTUAL_ENV=$READTHEDOCS_VIRTUALENV_PATH poetry install --only=doc
-
-# Build documentation in the doc/main/ directory with Sphinx
-sphinx:
-  configuration: doc/main/conf.py
-
-# Optionally build your docs in additional formats such as PDF
-formats:
-   - pdf

.vscode/extensions.json

@@ -4,8 +4,7 @@
 
 	// List of extensions which should be recommended for users of this workspace.
 	"recommendations": [
-		"ms-python.python",
-		"ms-python.black-formatter"
+		"ms-python.python"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [

.vscode/settings.json

@@ -1,24 +1,10 @@
 {
-    "files.exclude": {
-      "**/__pycache__": true,
-    },
-    "python.defaultInterpreterPath": ".venv/bin/python",
-    "python.autoComplete.extraPaths": ["jedi/src"],
-    "python.formatting.provider": "none",
-    "python.linting.pylintEnabled": false,
-    "python.linting.flake8Enabled": true,
+    "python.pythonPath": "${workspaceFolder}/.venv",
+    "python.formatting.provider": "black",
     "python.linting.pycodestyleEnabled": false,
+    "python.linting.flake8Enabled": true,
     "python.linting.enabled": true,
-    "[python]": {
-        "editor.formatOnSave": true,
-        "editor.defaultFormatter": "ms-python.black-formatter"
-    },
     "python.languageServer": "Pylance",
-    "python.testing.pytestArgs": [
-        "jedi/tests"
-    ],
-    "python.testing.unittestEnabled": false,
-    "python.testing.pytestEnabled": true,
     "files.associations": {"*.inc": "restructuredtext"},
     "restructuredtext.confPath": "${workspaceFolder}/doc/main",
     "spellright.language": [
@@ -48,12 +34,5 @@
         "plaintext",
         "python",
         "restructuredtext",
-    ],
-    "rewrap.wrappingColumn": 78,
-    "python.analysis.extraPaths": [
-        "jedi/src"
-    ],
-    "yaml.schemas": {
-        "https://json.schemastore.org/github-workflow.json": "file:///home/david/work/pybricks/pybricks-api/.github/workflows/build.yml"
-    },
+    ]
 }

.vscode/spellright.dict

@@ -78,4 +78,3 @@ thermistor
 toctree
 TODO
 UART
-utf-8

CHANGELOG.md

@@ -2,198 +2,6 @@
 
 <!-- refer to https://keepachangelog.com/en/1.0.0/ for guidance -->
 
-## Unreleased
-
-## 3.5.0- 2024-04-11
-
-### Changed
-- Bump version to 3.5.0 without additional changes.
-
-## 3.5.0b2 - 2024-04-05
-
-### Added
-
-- Added `pybricks.pupdevices.Remote.disconnect` method.
-- Added blocks for `up`, `ready` and `stationary` for IMUs.
-- Added `last` and `chr` parameters to `read_input_byte` and add blocks.
-- Added block for the `in` operation.
-- Add double ternary block.
-
-## 3.5.0b1 - 2024-03-11
-
-### Added
-
-- Added `XboxController.rumble` method.
-- Added block icons for `hub.system.set_stop_button` and `hub.system.shutdown`.
-- Added program stop block (`raise SystemExit`).
-
-## 3.4.1 - 2024-03-11
-
-### Fixed
-
-- Fixed Read The Docs virtual environment workflow.
-
-## 3.4.0 - 2024-03-11
-
-### Changed
-
-- Update list block screenshots to match implementation.
-
-## 3.4.0b5 - 2024-03-05
-
-### Changed
-
-- Updates for v3.4.0b3 firmware (out of sync with docs).
-- Changed `hub.button` to `hub.buttons` on single button hubs. Access via
- `hub.button` will keep working in the firmware for backwards compatibility.
-
-## 3.4.0b4 - 2024-02-14
-
-### Added
-
-- Added `pybricks.iodevices.XboxController` class.
-
-### Changed
-
-- Changed `buttons.pressed` return type to set.
-
-## 3.4.0b3 - 2024-01-30
-
-### Added
-
-- Added `pybricks.robotics.Car` class.
-
-### Changed
-
-- Changed `pybricks.robotics.DriveBase` icon to two wheels instead of steering
-  wheel, which will be used for the new car class.
-
-## 3.4.0b2 - 2023-11-28
-
-### Changed
-- Include first batch of block coding images.
-
-## 3.3.0 - 2023-11-24
-
-### Changed
-- Bump beta version to release version with no further changes.
-
-## 3.3.0c1 - 2023-11-20
-
-### Added
-- Enabled tilt and orientation config for `MoveHub()`.
-- Documented `Motor.close()`
-
-## Fixed
-- Fixed missing awaitable for `Remote.light` and LWP3 writes.
-
-## 3.3.0b9 - 2023-10-26
-
-### Changed
-- Changed the beta feature for using the hub's gyro. Gyro control can now be
-  toggled using `use_gyro` instead of using a separate `GyroDriveBase` class.
-- Documentation updates to match firmware 3.3.0b5--3.3.0b9 updates.
-
-### Added
-- Added `set` to `ubuiltins` module.
-- Basic multitasking docs.
-- Awaitable keyword for awaitable methods and functions.
-
-## 3.3.0b5 - 2023-05-16
-
-### Added
-- Documented new `hub.ble` methods.
-
-## 3.3.0b4 - 2023-04-21
-
-### Added
-- Documented `integral_deadzone` in `Control.pid()`.
-- Documented `Motor.model`. This can be used to view the estimated motor
-  state and change its settings.
-- Added `rotation`, `orientation`, `ready`, `stationary` and `settings` methods
-  to `IMU` class.
-- Added `GyroDriveBase` class to `pybricks.robotics`.
-
-### Changed
-- Change implementation status of `IMU.heading` and `IMU.reset_heading`. They
-  are now implemented, with some limitations as noted in a note box.
-- Moved `Matrix` and `vector` from `pybricks.geometry` to `pybricks.tools`.
-- Moved `Axis` from `pybricks.geometry` to `pybricks.parameters`.
-
-### Removed
-- Removed `pybricks.geometry` module.
-
-## 3.2.0 - 2022-12-20
-
-### Changed
-- Changed module TOC headings to make it easier to find things.
-
-## 3.2.0c1 - 2022-12-09
-
-### Changed
-- Updated "front" side of the Technic Hub to be consistent with
-  the Prime Hub.
-
-## 3.2.0b6 - 2022-12-02
-
-### Added
-- Documented ``Stop.NONE`` and ``Stop.COAST_SMART``.
-- Documented ``ujson`` module.
-- Added `done` and `stalled` methods for `DriveBase`.
-
-### Changed
-- Changed `PrimeHub.display.image()` to `PrimeHub.display.icon()` and renamed
-  its kwarg from `image` to `icon`.
-- Improved presentation and docstrings of the ``ubuiltins`` and other
-  MicroPython modules
-- Moved the random numbers example for Move Hub to the Move Hub page.
-- Moved `done()`, `stalled()`, `load()` from `Control` to `Motor` object.
-
-## 3.2.0b5 - 2022-11-11
-
-### Fixed
-- Fixed Jedi code completion for `Color` and `Icon` classes in `pybricks.parameters`.
-
-## 3.2.0b4 - 2022-10-21
-
-### Added
-- Code auto-completion for `EssentialHub`.
-- Added `System.storage` method.
-
-### Fixed
-- Fixed some type hints in `parameters` submodule.
-
-## 3.2.0b1-r3 - 2022-06-26
-
-### Fixed
-- Fixed more type hints and improved compatibility with jedi.
-
-## 3.2.0b1-r2 - 2022-06-24
-
-### Changed
-- Moved remaining type hints from `.pyi` files to the python stub modules, and
-  fixed numerous errors in the type hints throughout.
-
-## 3.2.0b1-r1 - 2022-06-09
-
-### Added
-- Added `__init__.py` to `pybricks` package.
-
-## 3.2.0b1 - 2022-06-02
-
-### Added
-- Code auto-completion for `hub.charger`, `hub.imu` and `hub.system`.
-- Moved typing from several `.pyi` files to the actual python modules.
-
-### Fixed
-- Fixed code completion for `DCMotor` and `Motor` classes in MS Python VS Code extension.
-- Fixed missing `DCMotor` type in `ev3devices`.
-- Fixed type hint for `Motor.reset_angle()` in `pupdevices`.
-
-### Changed
-- Setter for acceleration can now also be used to set acceleration and
-  deceleration to different values, using a two-valued tuple.
-
 ## 3.1.0 - 2021-12-16
 
 ### Added
@@ -247,7 +55,7 @@ not correspond to Pybricks firmware version numbers.**
 
 ## 1.3.2 - 2021-04-26
 
-### Changed
+## Changed
 - Theme style fixes.
 - Example code fixes
 - Match doc version to firmware version.

CONTRIBUTING.md

@@ -32,91 +32,14 @@ will actually be implemented.
      - pybricks.tools.wait: Add example of waiting.
      - pybricks.pupdevices: Fix all sensor class ports.
      - umath.sin: Fix spelling of Hypotenuse.
-  - If an import path makes no sense, just use the file path without
-    extensions:
+  - If an import path makes no sense, just use the file path without extensions:
      - .vscode/settings: Fix file associations.
-- The subject briefly describes _what_ was changed. Use a short full sentence
-  as in the examples above.
+- The subject briefly describes _what_ was changed. Use a short full sentence as in the examples above.
 - The body describes _why_ the change was made, e.g. `The word "sensor" was
   spelled incorrectly`.
 
 [commits]: https://github.com/pybricks/pybricks-api/commits/master
 
-**General docstring principles:**
-
-The stubs libraries in this repository have two different purposes:
-1. Auto-generating documentation with Sphinx. For this purpose, the
-   documentation should be concise and clear.
-2. Provide autocomplete and intellisense in code editors. For this purpose,
-   the code needs to be 100% correct. This way, computers can parse your code
-   correctly and tell you when something is wrong.
-
-Since these objectives don't always align, we address these separately in the
-stubs library:
-
-1. The first line(s) of the docstring contain the function or method signature
-   as it should be displayed in the human-readable documentation.
-2. The real function signature can be as complex as it needs to be to make it
-   correct for intellisense. Overloads can be uses if needed.
-
-In the rare case where the docstring signature is the same as the typed
-version, we'll still include it for consistency.
-
-**Docstring details:**
-
-Make sure to look at existing function signatures and docstrings for
-inspiration when documenting new functionality. As an example, consider:
-
-```python
-def run_until_stalled(
-    self,
-    speed: Number,
-    then: Stop = Stop.COAST,
-    duty_limit: Optional[Number] = None,
-) -> int:
-    """
-    run_until_stalled(speed, then=Stop.COAST, duty_limit=None) -> int: deg
-
-    Runs the motor at a constant speed until it stalls.
-
-    Arguments:
-        speed (Number, deg/s): Speed of the motor.
-        then (Stop): What to do after coming to a standstill.
-        duty_limit (Number, %): Duty cycle limit during this
-            command. This is useful to avoid applying the full motor
-            torque to a geared or lever mechanism. If it is ``None``, the
-            duty limit won't be changed during this command.
-
-    Returns:
-        Angle at which the motor becomes stalled.
-    """
-```
-The real method signature at the top contains the full detail, including the
-type of each argument and return value.
-
-The docstring starts with the signature. Use more than one signature if needed
-to represent overloaded methods. The signatures are written in the way they
-should be displayed in the docs:
-- Argument types are omitted because they are also shown with the argument
-  description below.
-- Default values should be given (``then=Stop.COAST``).
-- The return type should be given (``-> int``). When applicable, include
-  the unit of the return value, so it becomes ``-> int: deg``
-
-Then follows a concise description of what this method, function, or class
-does.
-
-Then follows a list of arguments:
-- For each argument, include the expected type and unit if applicable, e.g.
-  ``(int)`` or ``(Number, deg/s)``.
-- Use ``Number`` when ``int`` and ``float`` are both allowed.
-- If the description is long, use the indentation shown above.
-- Make it readable. Instead
-  of ``Union[float, SupportsFloat, complex, SupportsComplex]``,
-  just say _float or complex_.
-
-Then follows a description of the return value. The type is omitted here since
-it is already include in the docstring signature.
 
 **Development environment:**
 
@@ -126,8 +49,8 @@ Prerequisites:
 - [Python 3][python]
 - [Poetry][poetry]
 
-Information on installing prerequisites can be found on the
-[pybricks-micropython contributor's guide][contributing].
+Information on installing prerequisites can be found on the [pybricks-micropython
+wiki][wiki].
 
 Initial setup:
 
@@ -167,4 +90,4 @@ Linting:
 [git]: https://git-scm.com/
 [python]: https://www.python.org/
 [poetry]: https://python-poetry.org/
-[contributing]: https://github.com/pybricks/pybricks-micropython/blob/master/CONTRIBUTING.md
+[wiki]: https://github.com/pybricks-micropython/wiki

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2022 The Pybricks Authors
+Copyright (c) 2018-2021 The Pybricks Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.rst

@@ -12,11 +12,6 @@ used to generate the `official documentation`_.
 See the `contributor's guide <CONTRIBUTING.md>`_ for acceptable changes and
 instructions to build the documentation locally.
 
-You can use the API stubs in this repository for syntax highlighting and code
-completion when programming the EV3 with VS Code. To enable, remove the
-``"python.languageServer"="None"`` line in the ``.vscode/settings.json`` file
-generated by the *LEGO® MINDSTORMS® EV3 MicroPython* extension.
-
 For general discussion, please visit the `support`_ issue tracker.
 
 .. _Pybricks package: pybricks

doc/Makefile

@@ -11,13 +11,13 @@ TAG           = main
 
 # Put it first so that "make" without argument is like "make help".
 help:
-	@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(TAG) $(O)
+	@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) -t $(TAG) $(O)
 
 .PHONY: help Makefile
 
 diagrams:
-	@$(MAKE) -C "$(SOURCEDIR)"/diagrams_source clean
-	@$(MAKE) -C "$(SOURCEDIR)"/diagrams_source
+	@$(MAKE) -C "$(SOURCEDIR)"/diagram_source clean
+	@$(MAKE) -C "$(SOURCEDIR)"/diagram_source
 
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).

doc/common/_static/css/blocks.css

@@ -1,3 +0,0 @@
-.block-image {
-    margin-top: 10px;
-}

doc/common/_static/css/ide.css

@@ -40,11 +40,3 @@
 ::-webkit-scrollbar-thumb:hover {
     background: #182026;
 }
-
-html.writer-html5 .rst-content dl.citation,
-html.writer-html5 .rst-content dl.field-list,
-html.writer-html5 .rst-content dl.footnote {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: unset;
-}

doc/common/_static/css/theme_overrides.css

@@ -41,7 +41,3 @@ span.caption-number:after {
 .figure > a.reference.external::after {
     content: none !important;
 }
-
-.wy-side-nav-search > div.version {
-    color: hsla(0, 0%, 100%, 0.75);
-}

doc/common/conf.py

@@ -27,20 +27,21 @@ from docutils import nodes
 from docutils.parsers.rst.directives import flag
 from docutils.parsers.rst import Directive
 from sphinx.application import Sphinx
-from sphinx.addnodes import pending_xref
-from sphinx.environment import BuildEnvironment
-from sphinx.util.nodes import make_refnode
 import toml
 
-TOP_DIR = os.path.abspath(os.path.join("..", ".."))
-sys.path.insert(0, os.path.join(TOP_DIR, "src"))
-sys.path.append(os.path.abspath("../common/extensions"))
+TOP_DIR = os.path.abspath(os.path.join('..', '..'))
+sys.path.insert(0, os.path.join(TOP_DIR, 'src'))
+sys.path.append(os.path.abspath('../common/extensions'))
+
+from pybricks.hubs import EV3Brick  # noqa E402
+from pybricks.media.ev3dev import Image  # noqa E402
+from pybricks._common import Speaker  # noqa E402
 
 # ON_RTD is whether we are on readthedocs.org
 # this line of code grabbed from docs.readthedocs.org
-ON_RTD = os.environ.get("READTHEDOCS", None) == "True"
+ON_RTD = os.environ.get('READTHEDOCS', None) == 'True'
 
-_pyproject = toml.load(os.path.join(TOP_DIR, "pyproject.toml"))
+_pyproject = toml.load(os.path.join(TOP_DIR, 'pyproject.toml'))
 
 # -- General configuration ------------------------------------------------
 
@@ -52,30 +53,27 @@ _pyproject = toml.load(os.path.join(TOP_DIR, "pyproject.toml"))
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
 extensions = [
-    "sphinx.ext.autodoc",
-    "sphinx.ext.napoleon",
-    "sphinx.ext.todo",
-    "sphinx.ext.mathjax",
-    # Custom Pybricks extensions
-    "blockimg",
-    "color",
-    "classlink",
-    "requirements",
-    "requirements-static",
-    "versionchanged",
+    'sphinx.ext.autodoc',
+    'sphinx.ext.napoleon',
+    'sphinx.ext.todo',
+    'sphinx.ext.mathjax',
+    'color',
+    'classlink',
+    'requirements',
+    'requirements-static',
 ]
 
 # Add any paths that contain templates here, relative to this directory.
-templates_path = ["../common/_templates"]
+templates_path = ['../common/_templates']
 
 # The suffix(es) of source filenames.
 # You can specify multiple suffix as a list of string:
 #
 # source_suffix = ['.rst', '.md']
-source_suffix = ".rst"
+source_suffix = '.rst'
 
 # The master toctree document.
-master_doc = "index"
+master_doc = 'index'
 
 # The version info for the project you're documenting, acts as replacement for
 # |version| and |release|, also used in various other places throughout the
@@ -84,17 +82,17 @@ master_doc = "index"
 # The full version, including alpha/beta/rc tags.
 release = "v" + _pyproject["tool"]["poetry"]["version"]
 # The short X.Y version.
-version = re.match(r"(v\d+\.\d+)", release)[0]
+version = re.match(r'(v\d+\.\d+)', release)[0]
 
 # The language for content autogenerated by Sphinx. Refer to documentation
 # for a list of supported languages.
 #
 # This is also used if you do content translation via gettext catalogs.
 # Usually you set "language" from the command line for these cases.
-language = "en"
+language = None
 
 # The name of the Pygments (syntax highlighting) style to use.
-pygments_style = "xcode"
+pygments_style = 'xcode'
 
 # If true, `todo` and `todoList` produce output, else they produce nothing.
 todo_include_todos = True
@@ -102,10 +100,10 @@ todo_include_todos = True
 # Figure numbering
 numfig = True
 numfig_format = {
-    "figure": "Figure %s",
-    "table": "Table %s",
-    "code-block": "Listing %s",
-    "section": "Section %s",
+    'figure': 'Figure %s',
+    'table': 'Table %s',
+    'code-block': 'Listing %s',
+    'section': 'Section %s'
 }
 
 # Find cross-reference errors
@@ -113,46 +111,59 @@ nitpicky = True
 
 # https://stackoverflow.com/a/30624034/1976323
 nitpick_ignore = [
-    ("py:class", "bool"),
-    ("py:class", "bytearray"),
-    ("py:class", "bytes"),
-    ("py:class", "callable"),
-    ("py:class", "dict"),
-    ("py:class", "float"),
-    ("py:class", "int"),
-    ("py:class", "iter"),
-    ("py:class", "list"),
-    ("py:class", "object"),
-    ("py:class", "str"),
-    ("py:class", "tuple"),
-    ("py:exc", "OSError"),
-    ("py:exc", "RuntimeError"),
-    ("py:exc", "TypeError"),
-    ("py:exc", "ValueError"),
+    ('py:class', 'bool'),
+    ('py:class', 'bytearray'),
+    ('py:class', 'bytes'),
+    ('py:class', 'callable'),
+    ('py:class', 'dict'),
+    ('py:class', 'float'),
+    ('py:class', 'int'),
+    ('py:class', 'iter'),
+    ('py:class', 'list'),
+    ('py:class', 'object'),
+    ('py:class', 'str'),
+    ('py:class', 'tuple'),
+    ('py:exc', 'OSError'),
+    ('py:exc', 'RuntimeError'),
+    ('py:exc', 'TypeError'),
+    ('py:exc', 'ValueError'),
 ]
 
 # not sure why, but this is needed for typing.IO in uselect
-nitpick_ignore.append(("py:obj", "typing.IO"))
+nitpick_ignore.append(('py:class', 'IO'))
+
+# Workaround until change below is released.
+# https://github.com/sphinx-doc/sphinx/commit/86091934db5ec593b4b0c982b7f08f3231ef995b
+nitpick_ignore.extend([
+    ('py:class', '0'),
+    ('py:class', '1'),
+    ('py:class', '2'),
+    ('py:class', '3'),
+    ('py:class', 'big'),
+    ('py:class', 'little'),
+])
 
 # -- Autodoc options ------------------------------------------------------
 
-autodoc_member_order = "bysource"
+autodoc_member_order = 'bysource'
 autodoc_default_options = {
-    "members": True,
-    "undoc-members": True,
+    'members': True,
+    'undoc-members': True,
 }
-autoclass_content = "both"  # This ensures init arguments are not ignored
+autoclass_content = 'both'  # This ensures init arguments are not ignored
 add_module_names = False  # Hide module name
 
 # -- Options for HTML output ----------------------------------------------
 
-import sphinx_rtd_theme
-
-html_theme = "sphinx_rtd_theme"
-html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
+if ON_RTD:
+    html_theme = 'default'
+else:
+    import sphinx_rtd_theme
+    html_theme = 'sphinx_rtd_theme'
+    html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
 
 html_context = {
-    "disclaimer": _DISCLAIMER,
+    'disclaimer': _DISCLAIMER,
 }
 
 # The theme to use for HTML and HTML Help pages.  See the documentation for
@@ -165,15 +176,14 @@ html_context = {
 # documentation.
 #
 html_theme_options = {
-    "style_external_links": True,
-    "logo_only": True,
-    "style_nav_header_background": "#0088ce",  # Pybricks blue
+   'style_external_links': True,
+   'logo_only': True,
 }
 
 # Add any paths that contain custom static files (such as style sheets) here,
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
-html_static_path = ["../common/_static"]
+html_static_path = ['../common/_static']
 
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.
@@ -181,9 +191,9 @@ html_static_path = ["../common/_static"]
 # This is required for the alabaster theme
 # refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars
 html_sidebars = {
-    "**": [
-        "relations.html",  # needs 'show_related': True theme option to display
-        "searchbox.html",
+    '**': [
+        'relations.html',  # needs 'show_related': True theme option to display
+        'searchbox.html',
     ]
 }
 
@@ -193,7 +203,7 @@ html_scaled_image_link = False
 # -- Options for HTMLHelp output ------------------------------------------
 
 # Output file base name for HTML help builder.
-htmlhelp_basename = "Pybricksdoc"
+htmlhelp_basename = 'Pybricksdoc'
 
 
 # -- Options for LaTeX output ---------------------------------------------
@@ -202,12 +212,14 @@ latex_elements = {
     # The paper size ('letterpaper' or 'a4paper').
     #
     # 'papersize': 'letterpaper',
+
     # The font size ('10pt', '11pt' or '12pt').
     #
     # 'pointsize': '10pt',
+
     # Additional stuff for the LaTeX preamble.
     #
-    "preamble": r"""
+    'preamble': r'''
     \usepackage{CJKutf8}
     \makeatletter
     \fancypagestyle{normal}{
@@ -227,46 +239,54 @@ latex_elements = {
         \renewcommand{\footrulewidth}{0.4pt}
     }
     \makeatother
-    """
-    % {
-        "disclaimer": " ".join((_DISCLAIMER, "©", copyright)),
+    ''' % {
+        'disclaimer': ' '.join((_DISCLAIMER, '©', copyright)),
     },
+
     # Latex figure (float) alignment
     #
     # 'figure_align': 'htbp',
-    "extraclassoptions": "openany,oneside",
-    "releasename": "Version",
+    'extraclassoptions': 'openany,oneside',
+
+    'releasename': 'Version',
 }
 
 # Grouping the document tree into LaTeX files. List of tuples
 # (source start file, target name, title,
 #  author, documentclass [howto, manual, or own class]).
 latex_documents = [
-    (master_doc, "".join([project, "-v", version, ".tex"]), _TITLE, author, "manual"),
+    (master_doc, ''.join([project, '-v', version, '.tex']), _TITLE,
+     author, 'manual'),
 ]
 
 # -- Content control -----------------------------------------------------
 
 
 exclude_patterns = [
-    "ev3devices.rst",
-    "hubs/ev3brick.rst",
-    "iodevices/analogsensor.rst",
-    "iodevices/dcmotor.rst",
-    "iodevices/ev3devsensor.rst",
-    "iodevices/i2cdevice.rst",
-    "iodevices/lumpdevice.rst",
-    "iodevices/uartdevice.rst",
-    "media.rst",
-    "messaging.rst",
-    "nxtdevices.rst",
-    "tools/datalog.rst",
+    'ev3devices.rst',
+    'hubs/ev3brick.rst',
+    'hubs/primehub.rst',
+    'geometry.rst',
+    'iodevices/analogsensor.rst',
+    'iodevices/dcmotor.rst',
+    'iodevices/ev3devsensor.rst',
+    'iodevices/i2cdevice.rst',
+    'iodevices/lumpdevice.rst',
+    'iodevices/lwp3device.rst',
+    'iodevices/uartdevice.rst',
+    'media.rst',
+    'messaging.rst',
+    'nxtdevices.rst',
+    'tools/datalog.rst'
 ]
 
 
 # One entry per manual page. List of tuples
 # (source start file, name, description, authors, manual section).
-man_pages = [(master_doc, "pybricks", "Pybricks Documentation", [author], 1)]
+man_pages = [
+    (master_doc, 'pybricks', 'Pybricks Documentation',
+     [author], 1)
+]
 
 
 # -- Options for Texinfo output -------------------------------------------
@@ -275,100 +295,33 @@ man_pages = [(master_doc, "pybricks", "Pybricks Documentation", [author], 1)]
 # (source start file, target name, title, author,
 #  dir menu entry, description, category)
 texinfo_documents = [
-    (
-        master_doc,
-        "Pybricks",
-        "Pybricks Documentation",
-        author,
-        "Pybricks",
-        "One line description of project.",
-        "Miscellaneous",
-    ),
+    (master_doc, 'Pybricks', 'Pybricks Documentation',
+     author, 'Pybricks', 'One line description of project.',
+     'Miscellaneous'),
 ]
 
 
 # -- .. availability:: directive
 
-
 class AvailabilityDirective(Directive):
     has_content = True
     option_spec = {
-        "movehub": flag,
-        "cityhub": flag,
-        "technichub": flag,
-        "ev3dev-stretch": flag,
+        'movehub': flag,
+        'cityhub': flag,
+        'technichub': flag,
+        'ev3dev-stretch': flag,
     }
 
     def run(self):
         if not self.options:
-            raise self.error("Must specify at least one platform.")
+            raise self.error('Must specify at least one platform.')
         # TODO: make links to platform pages
-        return [
-            nodes.emphasis(text="Availability: "),
-            nodes.Text(", ".join(self.options)),
-        ]
-
-
-def on_missing_reference(
-    app: Sphinx, env: BuildEnvironment, node: pending_xref, contnode: nodes.Element
-) -> nodes.Element:
-    # The Number type alias is on the Signals and Units page instead of on the
-    # pybricks.parameters page so normal resolution doesn't work
-    if node["reftype"] == "class" and node["reftarget"] == "Number":
-        return make_refnode(
-            app.builder, node["refdoc"], "signaltypes", "numbers", contnode
-        )
-
-    # References with special characters can't exist, so we have to suppress
-    # warnings when Sphinx tries to cross reference units like deg/s. For
-    # consistency, we also treat units without special characters this way.
-    for unit in [
-        "dBm",
-        "deg",
-        "deg/s",
-        "deg/s²",
-        "mm",
-        "mm/s",
-        "mm/s²",
-        "%",
-        "mV",
-        "mA",
-        "ms",
-        "mNm",
-        "Hz",
-        "°C",
-        "J",
-        "Ω",
-        "N",
-    ]:
-        try:
-            # If they match on raw source, we are dealing with argument types.
-            if unit == contnode.rawsource:
-                # Return as-is to suppress missing cross reference warning. We
-                # could make this more fancy by returning an xref node that links
-                # to the signals page.
-                return contnode
-
-        except AttributeError:
-            pass
-
-        # Return types are denoted as "int: deg"
-        try:
-            # Try to unpack the node.
-            ret_type, ret_unit = str(contnode).split(": ")
-        except ValueError:
-            # Not a valid format, so skip.
-            continue
-
-        # If it's a match, we could format the node so it looks a bit nicer.
-        # For now just keep the colon notation as is.
-        if unit == ret_unit:
-            return nodes.Text(f"{ret_type}: {ret_unit}")
+        return [nodes.emphasis(text='Availability: '),
+                nodes.Text(', '.join(self.options))]
 
 
 def setup(app: Sphinx):
-    app.add_directive("availability", AvailabilityDirective)
-    app.connect("missing-reference", on_missing_reference)
+    app.add_directive('availability', AvailabilityDirective)
 
 
 # -- Python domain hacks ---------------------------------------------------

doc/common/extensions/blockimg.py

@@ -1,59 +0,0 @@
-import xml.etree.ElementTree as ET
-
-from docutils.parsers.rst import directives
-from docutils.parsers.rst.directives.images import Image
-from docutils.nodes import image, paragraph
-from pathlib import Path
-
-SPHINX_IMAGE_PATH = "blockimg"
-
-SVG_SCALE = 0.9
-
-
-def get_svg_size(file_path):
-    tree = ET.parse(file_path)
-    root = tree.getroot()
-
-    width = root.attrib.get("width")
-    height = root.attrib.get("height")
-
-    return float(width), float(height)
-
-
-# Global variable to store the app object
-app = None
-
-
-class BlockImageDirective(Image):
-    option_spec = Image.option_spec.copy()
-    option_spec["stack"] = directives.flag
-
-    def run(self):
-        # Adjust the image path
-        file_name = self.arguments[0] + ".svg"
-        self.arguments[0] = "/" + SPHINX_IMAGE_PATH + "/" + file_name
-        path = Path(app.srcdir) / SPHINX_IMAGE_PATH / file_name
-
-        # Set it to the scaled SVG size unless width explicitly set.
-        if self.options.get("width") is None:
-            width, height = get_svg_size(path)
-            self.options["width"] = str(round(width * SVG_SCALE)) + "px"
-            self.options["height"] = str(round(height * SVG_SCALE)) + "px"
-
-        # Call the parent class's run method
-        nodes = super().run()
-
-        # Wrap each image node in a paragraph node
-        for i, node in enumerate(nodes):
-            if isinstance(node, image):
-                if "stack" not in self.options:
-                    node["classes"].append("block-image")
-                nodes[i] = paragraph("", "", node)
-
-        return nodes
-
-
-def setup(apparg):
-    global app
-    app = apparg
-    app.add_directive("blockimg", BlockImageDirective)

doc/common/extensions/classlink.py

@@ -13,23 +13,21 @@ class PybricksClasslinkDirective(Directive):
         link = name if len(self.arguments) == 1 else self.arguments[1]
 
         html = (
-            '<a href="{0}.html">'.format(link.lower())
-            + '<dl class="py class">'
-            + "<dt>"
-            + '<em class="property">class </em>'
-            + '<code class="sig-name descname">'
-            + name
-            + "</code>"
-            + "</dt>"
-            + "<dd></dd>"
-            + "</dl>"
-            + "</a>"
+            '<a href="{0}.html">'.format(link.lower()) +
+            '<dl class="py class">' +
+            '<dt>' +
+            '<em class="property">class </em>' +
+            '<code class="sig-name descname">' + name + '</code>' +
+            '</dt>' +
+            '<dd></dd>' +
+            '</dl>' +
+            '</a>'
         )
 
         # Return the node
-        node = nodes.raw("", html, format="html")
+        node = nodes.raw('', html, format="html")
         return [node]
 
 
 def setup(app):
-    app.add_directive_to_domain("py", "pybricks-classlink", PybricksClasslinkDirective)
+    app.add_directive_to_domain('py', 'pybricks-classlink', PybricksClasslinkDirective)

doc/common/extensions/color.py

@@ -16,27 +16,28 @@ class PybricksColorDirective(Directive):
         color = getattr(Color, name)
 
         # Convert HSV to RGB
-        r, g, b = hsv_to_rgb(color.h / 360, color.s / 100, color.v / 100)
+        r, g, b = hsv_to_rgb(color.h/360, color.s/100, color.v/100)
 
         # Convert RGB to HEX
-        rgbhex = "#{0:02x}{1:02x}{2:02x}".format(
-            round(r * 255), round(g * 255), round(b * 255)
+        rgbhex = '#{0:02x}{1:02x}{2:02x}'.format(
+            round(r*255),
+            round(g*255),
+            round(b*255)
         )
 
         # Render a small block of the given color
         css = "background-color: {0}; color: {0}; width: 50px;".format(rgbhex)
 
         if name == "WHITE":
-            css += (
-                "border-style: solid; border-width: 0.5px;" + "border-color: #666666;"
-            )
+            css += "border-style: solid; border-width: 0.5px;" + \
+                   "border-color: #666666;"
 
         html = '<div id="test" style="{0}">_</div>'.format(css)
 
         # Return the node
-        node = nodes.raw("", html, format="html")
+        node = nodes.raw('', html, format="html")
         return [node]
 
 
 def setup(app):
-    app.add_directive_to_domain("py", "pybricks-color", PybricksColorDirective)
+    app.add_directive_to_domain('py', 'pybricks-color', PybricksColorDirective)

doc/common/extensions/requirements-static.py

@@ -10,11 +10,10 @@ FEATURES_SMALL = set()
 
 # Medium feature set.
 FEATURES_MEDIUM = FEATURES_SMALL | {
-    "pybricks-common-control",
-    "pybricks-iodevices",
-    "stm32-extra",
-    "stm32-float",
-    "pybricks-frozen",
+    'pybricks-geometry',
+    'pybricks-iodevices',
+    'stm32-extra',
+    'stm32-float',
 }
 
 # Large feature set.
@@ -22,50 +21,44 @@ FEATURES_LARGE = FEATURES_MEDIUM | set()
 
 # Features per hub.
 HUB_FEATURES = {
-    "movehub": {"movehub"} | FEATURES_SMALL,
-    "cityhub": {"cityhub"} | FEATURES_MEDIUM,
-    "technichub": {"technichub", "gyro", "xbox-controller"} | FEATURES_MEDIUM,
-    "primehub": {"primehub", "inventorhub", "light-matrix", "gyro", "xbox-controller"}
-    | FEATURES_LARGE,
-    "inventorhub": {
-        "primehub",
-        "inventorhub",
-        "light-matrix",
-        "gyro",
-        "xbox-controller",
-    }
-    | FEATURES_LARGE,
-    "essentialhub": {"essentialhub", "gyro", "xbox-controller"} | FEATURES_LARGE,
+    'movehub': {'movehub'} | FEATURES_SMALL,
+    'cityhub': {'cityhub'} | FEATURES_MEDIUM,
+    'technichub': {'technichub'} | FEATURES_MEDIUM,
+    'primehub':  {'primehub', 'inventorhub'} | FEATURES_LARGE,
+    'inventorhub':  {'primehub', 'inventorhub'} | FEATURES_LARGE,
 }
 
 
 class PybricksRequirementsStaticDirective(Directive):
+
     required_arguments = 0
     optional_arguments = 10
 
     def run(self):
+
         # Copy required resources to static
         # CC BY-SA 4.0 via https://stackoverflow.com/a/63728208
         env = self.state.document.settings.env
 
-        destdir = path.join(env.app.builder.outdir, "_images")
+        destdir = path.join(env.app.builder.outdir, '_images')
         if not path.exists(destdir):
             makedirs(destdir)
 
         for hub in HUB_FEATURES:
-            uri = "compat_{0}.png".format(hub)
-            src_uri = path.join(env.app.builder.srcdir, "diagrams", uri)
-            build_uri = path.join(env.app.builder.outdir, "_images", uri)
-            copyfile(src_uri, build_uri)
+            for compat in ("true", "false"):
+                uri = 'compat_{0}_{1}_label.png'.format(hub, compat)
+                src_uri = path.join(env.app.builder.srcdir, 'images', uri)
+                build_uri = path.join(env.app.builder.outdir, '_images', uri)
+                copyfile(src_uri, build_uri)
 
         # Get requirements from sphinx-directive.
         requirements = set(self.arguments)
 
         # Cell with image of a hub.
         hub_cell = """
-        <th background="{0}_images/compat_{1}.png" class="requirements-table-th requirements-table-th">
-        {2}
-        </th>
+        <th><div class="align-default">
+        <img alt="" src="{0}_images/compat_{1}_{2}_label.png">
+        </div></th>
         """
 
         # Determine how far up the tree we are to set correct image path.
@@ -74,19 +67,18 @@ class PybricksRequirementsStaticDirective(Directive):
         depth_path = "../" * depth
 
         # Table row with hub images.
-        compat_row = "".join(
-            [
-                hub_cell.format(
-                    depth_path, hub, "✅" if requirements <= features else "❌"
-                )
-                for hub, features in HUB_FEATURES.items()
-            ]
-        )
+        compat_row = "".join([
+            hub_cell.format(
+                depth_path,
+                hub,
+                "true" if requirements <= features else "false")
+            for hub, features in HUB_FEATURES.items()
+        ])
 
         # Generate full table.
         html = """
         <div class="wy-table-responsive">
-            <table class="docutils align-default requirements-table">
+            <table class="docutils align-default">
                 <tbody>
                     <tr>
                         {0}
@@ -94,16 +86,16 @@ class PybricksRequirementsStaticDirective(Directive):
                 </tbody>
             </table>
         </div>
-        """.format(
-            compat_row
-        )
+        """.format(compat_row)
 
         # Return the node.
-        node = nodes.raw("", html, format="html")
+        node = nodes.raw('', html, format="html")
         return [node]
 
 
 def setup(app):
     app.add_directive_to_domain(
-        "py", "pybricks-requirements-static", PybricksRequirementsStaticDirective
+        'py',
+        'pybricks-requirements-static',
+        PybricksRequirementsStaticDirective
     )

doc/common/extensions/requirements.css

@@ -42,19 +42,3 @@ SOFTWARE. */
     margin-bottom: 0px;
 }
 
-.requirements-table {
-    width: 100%;
-}
-
-.requirements-table-th {
-    background-size:contain;
-    background-repeat: no-repeat;
-    text-align: right;
-    padding: 6px !important;
-  }
-
-.requirements-table-th:after {
-    content: '';
-    display: block;
-    margin-top: 80%;
-  }

doc/common/extensions/requirements.py

@@ -29,25 +29,25 @@ from sphinx.util.osutil import copyfile
 from sphinx.util import logging
 
 
-CSS_FILE = "requirements.css"
-JS_FILE = "requirements.js"
+CSS_FILE = 'requirements.css'
+JS_FILE = 'requirements.js'
 
 
 class PybricksRequirementsDirective(Directive):
     has_content = True
-    option_spec = {"header": directives.unchanged}
+    option_spec = {'header': directives.unchanged}
 
     required_arguments = 0
     optional_arguments = 10
 
     def run(self):
         node = nodes.container()
-        node["classes"].append("toggle-content")
+        node['classes'].append('toggle-content')
 
         par = nodes.container()
-        par["classes"].append("toggle-header")
+        par['classes'].append('toggle-header')
 
-        content = ".. pybricks-requirements-static:: " + " ".join(self.arguments)
+        content = '.. pybricks-requirements-static:: ' + " ".join(self.arguments)
 
         self.state.nested_parse(StringList([content]), self.content_offset, node)
 
@@ -60,20 +60,20 @@ def add_assets(app):
 
 
 def copy_assets(app, exception):
-    if app.builder.name not in ["html", "readthedocs"] or exception:
+    if app.builder.name not in ['html', 'readthedocs'] or exception:
         return
     logger = logging.getLogger(__name__)
-    logger.info("Copying requirements stylesheet/javascript... ", nonl=True)
-    dest = os.path.join(app.builder.outdir, "_static", CSS_FILE)
+    logger.info('Copying requirements stylesheet/javascript... ', nonl=True)
+    dest = os.path.join(app.builder.outdir, '_static', CSS_FILE)
     source = os.path.join(os.path.abspath(os.path.dirname(__file__)), CSS_FILE)
     copyfile(source, dest)
-    dest = os.path.join(app.builder.outdir, "_static", JS_FILE)
+    dest = os.path.join(app.builder.outdir, '_static', JS_FILE)
     source = os.path.join(os.path.abspath(os.path.dirname(__file__)), JS_FILE)
     copyfile(source, dest)
-    logger.info("done")
+    logger.info('done')
 
 
 def setup(app):
-    app.add_directive("pybricks-requirements", PybricksRequirementsDirective)
-    app.connect("builder-inited", add_assets)
-    app.connect("build-finished", copy_assets)
+    app.add_directive('pybricks-requirements', PybricksRequirementsDirective)
+    app.connect('builder-inited', add_assets)
+    app.connect('build-finished', copy_assets)

doc/common/extensions/versionchanged.py

@@ -1,31 +0,0 @@
-"""This directive hides the builtin directives
-    * versionchanged
-    * versionadded
-    * deprecated
-when building documentation with the 'ide' tag.
-"""
-from docutils import nodes
-from docutils.parsers.rst import Directive
-
-
-class PybricksVersionDirective(Directive):
-
-    has_content = True
-
-    def run(self):
-        html = ""
-        node = nodes.raw("", html, format="html")
-        return [node]
-
-
-def setup(app):
-    if "ide" in app.tags.tags:
-        app.add_directive_to_domain(
-            "py", "deprecated", PybricksVersionDirective, override=True
-        )
-        app.add_directive_to_domain(
-            "py", "versionadded", PybricksVersionDirective, override=True
-        )
-        app.add_directive_to_domain(
-            "py", "versionchanged", PybricksVersionDirective, override=True
-        )

doc/main/blockimg/LICENSE

@@ -1 +0,0 @@
-Copyright (c) 2024 The Pybricks Authors - All rights reserved

doc/main/blockimg/pybricks_blockBatteryMeasure_CityHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335.8125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="335.8125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="TM:xt;sb{[(ouv1G)6=7" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 293.8125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -293.8125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="t#MJ)EYE%Nd$JbJg$lf," transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 73.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -73.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">city hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(69.3359375,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(169.3359375,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(230.6875,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_CityHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 336.703125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="336.703125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="Aw^Mpc.{F?hs$,|l9?/w" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 294.703125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -294.703125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="37AlsSCP[IW2ldqWM~%G" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 73.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -73.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">city hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(69.3359375,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(169.3359375,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(230.6875,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_EssentialHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 376.7265625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="376.7265625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="VR.uH`([INlm($[u*-qB" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 334.7265625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -334.7265625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="nZ+o}Pq.^5V`TMQ}UU}O" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 114.25 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -114.25 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">essential hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(110.25,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(210.25,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(271.6015625,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_EssentialHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.6171875 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="377.6171875" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="#U3R,_0;K#BQs]w#pvew" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 335.6171875 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -335.6171875 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="FkCg4^C)Gv8gD2+sD4+Y" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 114.25 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -114.25 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">essential hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(110.25,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(210.25,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(271.6015625,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_InventorHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 371.359375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="371.359375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="/_mt(`U#Wp/mHCHw{UPZ" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 329.359375 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -329.359375 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="BTEgeCu?;zzs!1zlA0/9" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.8828125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.8828125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">inventor hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.8828125,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(204.8828125,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(266.234375,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_InventorHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 372.25 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="372.25" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="XHIL)43~Y;BOk+pm|]+X" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 330.25 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -330.25 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="=nD$@1E**Clx=jU^fP9!" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.8828125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.8828125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">inventor hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.8828125,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(204.8828125,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(266.234375,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_MoveHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.0390625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="350.0390625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="Y?1*1D2ko!i~gk6-w#k_" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 308.0390625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -308.0390625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="cvy8yY-3n8Wk8:eXNm%N" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 87.5625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -87.5625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">move hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(83.5625,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(183.5625,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(244.9140625,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_MoveHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.9296875 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="350.9296875" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="O].[M@qC{]{RQ37T^}n*" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 308.9296875 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -308.9296875 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id=";XcZ`(Jg-QHT6;@9irpn" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 87.5625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -87.5625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">move hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(83.5625,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(183.5625,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(244.9140625,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_PrimeHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.8125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="351.8125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="VQOntrQLF]Hloj]P@}[h" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 309.8125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -309.8125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="WEahWZni:i=BOgtfrRX$" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 89.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -89.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">prime hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(85.3359375,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(185.3359375,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(246.6875,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_PrimeHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.703125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="352.703125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="l2+(Sy-$bK^UZVH8slg[" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 310.703125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -310.703125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="m#l9@/ZS#$6Bpih66vFR" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 89.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -89.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">prime hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(85.3359375,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(185.3359375,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(246.6875,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_TechnicHub_battery.current.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 364.2578125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="364.2578125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="mhR%KRMic=.FV{|c_t5a" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 322.2578125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -322.2578125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="h1xvwMNyzH@Q.[+@Ah)Z" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 101.78125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -101.78125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">technic hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(97.78125,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(197.78125,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(259.1328125,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="91.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">current</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.125,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBatteryMeasure_TechnicHub_battery.voltage.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.1484375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="365.1484375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern9387213926908944)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="VC`B!I?5;,-QT0D#xQuz" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 323.1484375 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -323.1484375 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="(]VvG{675B%eXPE*=G[5" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 101.78125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -101.78125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,6.5)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9.5">technic hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(97.78125,3.5)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8ZyBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAiPgo8cmVjdCB4PSI3LjcyNjUiIHk9IjIuMDkyNWUtNyIgd2lkdGg9IjkuNTQ3IiBoZWlnaHQ9IjMuOTM2OCIgcng9Ii43NTg0MSIgcnk9Ii43MjU0MyIvPgo8cGF0aCBkPSJtNS4xMDYzIDMuMDIyMmMtMC4zMzYxMy0xZS03IC0wLjYwNjI1IDAuMzEwMTctMC42MDYyNSAwLjY5NTMxdjIwLjU4N2MwIDAuMzg1MTQgMC4yNzAxMiAwLjY5NTMxIDAuNjA2MjUgMC42OTUzMWgxNC43ODdjMC4zMzYxMyAwIDAuNjA2MjUtMC4zMTAxNyAwLjYwNjI1LTAuNjk1MzF2LTIwLjU4N2MwLTAuMzg1MTQtMC4yNzAxMi0wLjY5NTMxLTAuNjA2MjUtMC42OTUzMXptMC45NDIxOSAyLjE4MTZoMTIuOTAzdjUuMzYxM2gtMTIuOTAzeiIvPgo8L2c+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(197.78125,10.5)"><text class="blocklyText" dominant-baseline="central" x="0" y="9.5">battery</text></g><g class="blocklyEditableText" transform="translate(259.1328125,4.9)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="30.2" width="92.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="15.1">voltage</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.015625,9.1)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBleObserve_CityHub.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297.6015625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="297.6015625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="d4%8R0P|NsuWM7/n34f0" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 255.6015625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -255.6015625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="RhT/N^Vc%GAY6X/,x6Xr" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 73.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -73.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">city hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(69.3359375,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIiBkPSJtLTIwLjc5NCAzLjVhMTIuNzI4IDEyLjcyOCAwIDAgMSAzLjcyNzkgOSAxMi43MjggMTIuNzI4IDAgMCAxLTMuNzI3OSA5IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiIGQ9Im0tMjMuOTQ4IDcuNDA3NWE3LjIwMTggNy4yMDE4IDAgMCAxIDIuMTA5MyA1LjA5MjQgNy4yMDE4IDcuMjAxOCAwIDAgMS0yLjEwOTMgNS4wOTI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Im0xIDE3Ljc3IDEwLjg4NS0xMC44ODUtNS41ODE5LTUuNTgxOXYyMi4zOTNsNS42NzQ0LTUuNjc0NC0xMC44NTUtMTAuODU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(169.3359375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">observe</text></g><g class="blocklyEditableText" transform="translate(238.703125,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">0</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBleObserve_EssentialHub.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.515625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="338.515625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="n)t+X~IZdbI-83^2,Bib" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 296.515625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -296.515625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="sx|#xWd;!FAj$+ee$`lX" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 114.25 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -114.25 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">essential hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(110.25,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIiBkPSJtLTIwLjc5NCAzLjVhMTIuNzI4IDEyLjcyOCAwIDAgMSAzLjcyNzkgOSAxMi43MjggMTIuNzI4IDAgMCAxLTMuNzI3OSA5IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiIGQ9Im0tMjMuOTQ4IDcuNDA3NWE3LjIwMTggNy4yMDE4IDAgMCAxIDIuMTA5MyA1LjA5MjQgNy4yMDE4IDcuMjAxOCAwIDAgMS0yLjEwOTMgNS4wOTI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Im0xIDE3Ljc3IDEwLjg4NS0xMC44ODUtNS41ODE5LTUuNTgxOXYyMi4zOTNsNS42NzQ0LTUuNjc0NC0xMC44NTUtMTAuODU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(210.25,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">observe</text></g><g class="blocklyEditableText" transform="translate(279.6171875,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">0</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBleObserve_PrimeHub.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.6015625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="313.6015625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id=";`a0~1?0(%3M`PmNGcP_" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 271.6015625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -271.6015625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="IqPhInwvUg`a.0?h;7hK" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 89.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -89.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">prime hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(85.3359375,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIiBkPSJtLTIwLjc5NCAzLjVhMTIuNzI4IDEyLjcyOCAwIDAgMSAzLjcyNzkgOSAxMi43MjggMTIuNzI4IDAgMCAxLTMuNzI3OSA5IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiIGQ9Im0tMjMuOTQ4IDcuNDA3NWE3LjIwMTggNy4yMDE4IDAgMCAxIDIuMTA5MyA1LjA5MjQgNy4yMDE4IDcuMjAxOCAwIDAgMS0yLjEwOTMgNS4wOTI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Im0xIDE3Ljc3IDEwLjg4NS0xMC44ODUtNS41ODE5LTUuNTgxOXYyMi4zOTNsNS42NzQ0LTUuNjc0NC0xMC44NTUtMTAuODU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(185.3359375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">observe</text></g><g class="blocklyEditableText" transform="translate(254.703125,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">0</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockBleObserve_TechnicHub.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 326.046875 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="326.046875" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="E6*-m1HDcv18zKGzs|Y6" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 284.046875 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -284.046875 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="kcT!H4rYvaj]NRg|o}X|" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 101.78125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -101.78125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">technic hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(97.78125,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKC0xLDEpIiBkPSJtLTIwLjc5NCAzLjVhMTIuNzI4IDEyLjcyOCAwIDAgMSAzLjcyNzkgOSAxMi43MjggMTIuNzI4IDAgMCAxLTMuNzI3OSA5IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIHRyYW5zZm9ybT0ic2NhbGUoLTEsMSkiIGQ9Im0tMjMuOTQ4IDcuNDA3NWE3LjIwMTggNy4yMDE4IDAgMCAxIDIuMTA5MyA1LjA5MjQgNy4yMDE4IDcuMjAxOCAwIDAgMS0yLjEwOTMgNS4wOTI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Im0xIDE3Ljc3IDEwLjg4NS0xMC44ODUtNS41ODE5LTUuNTgxOXYyMi4zOTNsNS42NzQ0LTUuNjc0NC0xMC44NTUtMTAuODU1IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(197.78125,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">observe</text></g><g class="blocklyEditableText" transform="translate(267.1484375,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">0</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockColor_ColorDistanceSensor_color.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 249.5859375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="249.5859375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="Vj{`AcqWBKR:gZzVT_j%" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 207.5859375 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -207.5859375 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="*pG;WRtz9F^6eUcOWG|W" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 64.46875 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -64.46875 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(60.46875,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8Zz4KPGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE3LjUiIHI9IjcuNSIgZmlsbD0iIzFmZjUwMCIgc3R5bGU9Ii13ZWJraXQtZm9udC1zbW9vdGhpbmc6YW50aWFsaWFzZWQiLz4KPGNpcmNsZSBjeD0iNy41IiBjeT0iMTcuNSIgcj0iNy41IiBmaWxsPSIjZjUyOTAwIiBzdHlsZT0iLXdlYmtpdC1mb250LXNtb290aGluZzphbnRpYWxpYXNlZCIvPgo8Y2lyY2xlIGN4PSIxMi41IiBjeT0iNy41IiByPSI3LjUiIGZpbGw9IiMwMDUwZjUiIHN0eWxlPSItd2Via2l0LWZvbnQtc21vb3RoaW5nOmFudGlhbGlhc2VkIi8+CjwvZz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g class="blocklyEditableText" transform="translate(160.46875,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="75.1171875" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">color</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(55.1171875,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockColor_ColorDistanceSensor_hsv.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 238.0390625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="238.0390625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="cgN)it=q81EV~UJFgM7*" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 196.0390625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -196.0390625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="Y};n=;pq.^d|rG--b6VE" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 64.46875 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -64.46875 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(60.46875,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8Zz4KPGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE3LjUiIHI9IjcuNSIgZmlsbD0iIzFmZjUwMCIgc3R5bGU9Ii13ZWJraXQtZm9udC1zbW9vdGhpbmc6YW50aWFsaWFzZWQiLz4KPGNpcmNsZSBjeD0iNy41IiBjeT0iMTcuNSIgcj0iNy41IiBmaWxsPSIjZjUyOTAwIiBzdHlsZT0iLXdlYmtpdC1mb250LXNtb290aGluZzphbnRpYWxpYXNlZCIvPgo8Y2lyY2xlIGN4PSIxMi41IiBjeT0iNy41IiByPSI3LjUiIGZpbGw9IiMwMDUwZjUiIHN0eWxlPSItd2Via2l0LWZvbnQtc21vb3RoaW5nOmFudGlhbGlhc2VkIi8+CjwvZz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g class="blocklyEditableText" transform="translate(160.46875,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="63.5703125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">hsv</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(43.5703125,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockColor_ColorSensor_color.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293.1484375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="293.1484375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="v!-lqi5y#j+;a,_#~iP4" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 251.1484375 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -251.1484375 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="I!X[{ocKU.Gb}31SL(}/" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.03125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.03125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">color sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.03125,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8Zz4KPGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE3LjUiIHI9IjcuNSIgZmlsbD0iIzFmZjUwMCIgc3R5bGU9Ii13ZWJraXQtZm9udC1zbW9vdGhpbmc6YW50aWFsaWFzZWQiLz4KPGNpcmNsZSBjeD0iNy41IiBjeT0iMTcuNSIgcj0iNy41IiBmaWxsPSIjZjUyOTAwIiBzdHlsZT0iLXdlYmtpdC1mb250LXNtb290aGluZzphbnRpYWxpYXNlZCIvPgo8Y2lyY2xlIGN4PSIxMi41IiBjeT0iNy41IiByPSI3LjUiIGZpbGw9IiMwMDUwZjUiIHN0eWxlPSItd2Via2l0LWZvbnQtc21vb3RoaW5nOmFudGlhbGlhc2VkIi8+CjwvZz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g class="blocklyEditableText" transform="translate(204.03125,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="75.1171875" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">color</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(55.1171875,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockColor_ColorSensor_hsv.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 281.6015625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="281.6015625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="MuY[+d=Vng}9NBqPKK#]" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 239.6015625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -239.6015625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="qfCc0X*byu?Z[uy?48bI" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.03125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.03125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">color sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.03125,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8Zz4KPGNpcmNsZSBjeD0iMTcuNSIgY3k9IjE3LjUiIHI9IjcuNSIgZmlsbD0iIzFmZjUwMCIgc3R5bGU9Ii13ZWJraXQtZm9udC1zbW9vdGhpbmc6YW50aWFsaWFzZWQiLz4KPGNpcmNsZSBjeD0iNy41IiBjeT0iMTcuNSIgcj0iNy41IiBmaWxsPSIjZjUyOTAwIiBzdHlsZT0iLXdlYmtpdC1mb250LXNtb290aGluZzphbnRpYWxpYXNlZCIvPgo8Y2lyY2xlIGN4PSIxMi41IiBjeT0iNy41IiByPSI3LjUiIGZpbGw9IiMwMDUwZjUiIHN0eWxlPSItd2Via2l0LWZvbnQtc21vb3RoaW5nOmFudGlhbGlhc2VkIi8+CjwvZz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g class="blocklyEditableText" transform="translate(204.03125,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="63.5703125" class="blocklyFieldRect blocklyDropdownRect" stroke="#4585a1" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">hsv</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(43.5703125,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockComment.svg

@@ -1,989 +0,0 @@
-<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.5 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="261.5" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern29564335225952343)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-
-  .controlsIconStyleLightTheme {
-    opacity: 0.2;
-  }
-  .controlsIconStyleLightTheme:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyleLightTheme:active {
-    opacity: 0.6;
-  }
-  
-
-  .controlsIconStyleDarkTheme {
-    opacity: 0.4;
-    filter: invert(1);
-  }
-  .controlsIconStyleDarkTheme:hover {
-    opacity: 0.6;
-    filter: invert(1);
-  }
-  .controlsIconStyleDarkTheme:active {
-    opacity: 0.8;
-    filter: invert(1);
-  }
-  
-</style><g transform="translate(1, 1)"><g data-id="NZ7WdOar=6yrO_EkGw)K" class="blocklyDraggable"><path class="blocklyPath" stroke="#8f8f8f" fill="#bfbfbf" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 216.5 a 4 4 0 0,1 4,4  v 6  V 38  V 40  V 40 a 4 4 0 0,1 -4,4  h -216.5  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g transform="translate(8,6.5)"><image height="30px" width="28px" alt="#" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyOCAzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLCA1KSI+CiAgICA8cGF0aCBkPSJtMTAuNTYgMy4wNzY0LTQuOTQ1IDE4LjQ2MiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMyIvPgo8cGF0aCBkPSJtNC4wNTQ2IDguMzAxNmgxOS4xMDYiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiLz4KPHBhdGggZD0ibTIuMTYwNiAxNS4yNjRoMTkuMTA2IiBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIi8+CjxwYXRoIGQ9Im0xOS4wNTUgMy4wNzY0LTQuOTQ1IDE4LjQ2MiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMyIvPgogIDwvZz4KPC9zdmc+"/></g><g transform="translate(44,6.5)"><image height="30px" width="3px" alt="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g class="blocklyEditableText" transform="translate(55,7.4)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="196.5" class="blocklyFieldRect" style="fill: rgb(162, 162, 162);"/><g class="blocklyEditableText"><text class="blocklyText blocklyMultilineText" x="8" y="5.6" dy="14">Describe your program.</text></g></g></g></g></svg>

doc/main/blockimg/pybricks_blockDistance_ColorDistanceSensor.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.3828125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="239.3828125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="lDlk9J`OT(,GY{4,Qd)]" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 197.3828125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -197.3828125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id=")/Cj|,g):/vlEShefB%3" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 64.46875 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -64.46875 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(60.46875,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMjAuMzI4IDEyLjU5MWgtMTUuNTczIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDAgMS4wMTM2IDEuMDE3NiAwIC0zLjkzMTQgLTI1LjY0OSkiIGQ9Im00MS44MzggMTIuMTc4aC04LjUwMzdsNC4yNTE5LTcuMzY0NXoiIGZpbGw9IiNmZmYiLz4KPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoMCAxLjAxMzYgLTEuMDE3NiAwIDI4LjkxNSAtMjUuNjQ5KSIgZD0ibTQxLjgzOCAxMi4xNzhoLTguNTAzN2w0LjI1MTktNy4zNjQ1eiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJtMC43NSAyMC4wNDR2LTE1LjU3MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJtMjQuMjUgMjAuMDQ0di0xNS41NzMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(160.46875,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">distance</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockDistance_ForceSensor.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 282.953125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="282.953125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id=")4!3WH13zM{dmK2f0=w*" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 240.953125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -240.953125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="]4SQO}[Nm%P,:{xVKQn)" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.0390625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.0390625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">force sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.0390625,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMjAuMzI4IDEyLjU5MWgtMTUuNTczIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDAgMS4wMTM2IDEuMDE3NiAwIC0zLjkzMTQgLTI1LjY0OSkiIGQ9Im00MS44MzggMTIuMTc4aC04LjUwMzdsNC4yNTE5LTcuMzY0NXoiIGZpbGw9IiNmZmYiLz4KPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoMCAxLjAxMzYgLTEuMDE3NiAwIDI4LjkxNSAtMjUuNjQ5KSIgZD0ibTQxLjgzOCAxMi4xNzhoLTguNTAzN2w0LjI1MTktNy4zNjQ1eiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJtMC43NSAyMC4wNDR2LTE1LjU3MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJtMjQuMjUgMjAuMDQ0di0xNS41NzMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(204.0390625,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">distance</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockDistance_InfraredSensor.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 303.3984375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="303.3984375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="/c0?C?SvXg|S%$=M0igj" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 261.3984375 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -261.3984375 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="7_Vpy}p0duC*r(RFi0R:" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 128.484375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -128.484375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">infrared sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(124.484375,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMjAuMzI4IDEyLjU5MWgtMTUuNTczIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDAgMS4wMTM2IDEuMDE3NiAwIC0zLjkzMTQgLTI1LjY0OSkiIGQ9Im00MS44MzggMTIuMTc4aC04LjUwMzdsNC4yNTE5LTcuMzY0NXoiIGZpbGw9IiNmZmYiLz4KPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoMCAxLjAxMzYgLTEuMDE3NiAwIDI4LjkxNSAtMjUuNjQ5KSIgZD0ibTQxLjgzOCAxMi4xNzhoLTguNTAzN2w0LjI1MTktNy4zNjQ1eiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJtMC43NSAyMC4wNDR2LTE1LjU3MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJtMjQuMjUgMjAuMDQ0di0xNS41NzMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(224.484375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">distance</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockDistance_UltrasonicSensor.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 308.7421875 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="308.7421875" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="_=uW$jucY@j;kQZaX(v6" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 266.7421875 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -266.7421875 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="/@W2iu2)S,Cm+6+M/J5O" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 133.828125 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -133.828125 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">distance sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(129.828125,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMjAuMzI4IDEyLjU5MWgtMTUuNTczIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KDAgMS4wMTM2IDEuMDE3NiAwIC0zLjkzMTQgLTI1LjY0OSkiIGQ9Im00MS44MzggMTIuMTc4aC04LjUwMzdsNC4yNTE5LTcuMzY0NXoiIGZpbGw9IiNmZmYiLz4KPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoMCAxLjAxMzYgLTEuMDE3NiAwIDI4LjkxNSAtMjUuNjQ5KSIgZD0ibTQxLjgzOCAxMi4xNzhoLTguNTAzN2w0LjI1MTktNy4zNjQ1eiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJtMC43NSAyMC4wNDR2LTE1LjU3MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJtMjQuMjUgMjAuMDQ0di0xNS41NzMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(229.828125,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">distance</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowBreakContinue_break.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 218.328125 46" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="218.328125" height="46" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="w2(uLyFP-OT)EjoyKKJo" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 173.328125 a 4 4 0 0,1 4,4  v 6  V 38  V 40  V 40 a 4 4 0 0,1 -4,4  h -208.328125 a 4 4 0 0,1 -4,-4 z&#10;"/><g class="blocklyEditableText" transform="translate(39,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="108.015625" class="blocklyFieldRect blocklyDropdownRect" stroke="#bf8013" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">break out</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(88.015625,8.6)"/></g><g transform="translate(155.015625,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">of loop</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowBreakContinue_continue.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.3203125 45.99999999999977" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="354.3203125" height="45.99999999999977" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="m^Ia,.bqpE4)a@)UJO|-" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 309.3203125 a 4 4 0 0,1 4,4  v 6  V 38  V 40  V 40 a 4 4 0 0,1 -4,4  h -344.3203125 a 4 4 0 0,1 -4,-4 z&#10;"/><g class="blocklyEditableText" transform="translate(39,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="244.0078125" class="blocklyFieldRect blocklyDropdownRect" stroke="#bf8013" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">continue with next iteration</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(224.0078125,8.6)"/></g><g transform="translate(291.0078125,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">of loop</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowForEach_loop_for.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.234375 122" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="181.234375" height="122" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="*=kjY+CH)3(~(`g@HYrd" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 136.234375 a 4 4 0 0,1 4,4  v 6  V 38  V 40 a 4 4 0 0,1 -4,4  H 61  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,0 -4,4  v 32 a 4 4 0 0,0 4,4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  H 175.234375 a 4 4 0 0,1 4,4  V 90  V 110 a 4 4 0 0,1 -4,4  h -136.234375  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="g$z5O=B86BHrRceAJp0B" transform="translate(39, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#d99115" d=" m 16,0  h 22.8984375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -22.8984375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(11,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="32.8984375" class="blocklyFieldRect" style="display: none;"/><text class="blocklyText" dominant-baseline="central" style="fill: rgb(255, 255, 255);" x="0" y="9">item</text></g></g><g data-id="{V!cYG(tX@eU1$h8(d,h" transform="translate(124.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#d99115" d=" m 16,0  h 15.1171875 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -15.1171875 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">for</text></g><g transform="translate(101.8984375,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">in</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowForEach_loop_for_list.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269.6875 122" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="269.6875" height="122" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="0Y:-{!zn`:7}FjAumZ8^" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 224.6875 a 4 4 0 0,1 4,4  v 6  V 42 a 4 4 0 0,1 -4,4  H 61  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,0 -4,4  v 32 a 4 4 0 0,0 4,4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  H 263.6875 a 4 4 0 0,1 4,4  V 90  V 110 a 4 4 0 0,1 -4,4  h -224.6875  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="_)~SaS`f5_oqiL~HxVqX" transform="translate(39, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#d99115" d=" m 16,0  h 22.8984375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -22.8984375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(11,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="32.8984375" class="blocklyFieldRect" style="display: none;"/><text class="blocklyText" dominant-baseline="central" style="fill: rgb(255, 255, 255);" x="0" y="9">item</text></g></g><g data-id="(XJy@%4VW3CIYhkXy_$g" transform="translate(124.1171875, 2)" class="blocklyDraggable" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0  h 95.5703125 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -95.5703125 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="ESD1eJKHG_JY}YX^M-aE" transform="translate(63.5703125, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0  h 8 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -8 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(15.55078125,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="8.8984375" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">3</text></g></g><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">range</text></g><g transform="translate(111.5703125,4.5)"><image height="30px" width="12px" alt="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMiAzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMi40NzM4IDUuNzk2OCA3LjUwOTYgOS40MDI3LTcuNTA5NiA5LjQwMjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQiLz4KICA8L2c+Cjwvc3ZnPg==" style="cursor: pointer;"/></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">for</text></g><g transform="translate(101.8984375,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">in</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowRepeat.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165.6171875 122" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="165.6171875" height="122" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="Nb?Z.WM.=u+PGG}4(}{f" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 120.6171875 a 4 4 0 0,1 4,4  v 6  V 38  V 40 a 4 4 0 0,1 -4,4  H 61  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,0 -4,4  v 32 a 4 4 0 0,0 4,4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  H 159.6171875 a 4 4 0 0,1 4,4  V 90  V 110 a 4 4 0 0,1 -4,4  h -120.6171875  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="ykNFo=9bO|kP[,/0rxoK" transform="translate(64.0234375, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#fff" d=" m 16,0  h 9.796875 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -9.796875 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="17.796875" class="blocklyFieldRect" stroke="#bf8013" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">10</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">repeat</text></g><g transform="translate(113.8203125,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">times</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowWhile_until.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.015625 122" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="206.015625" height="122" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="*ezI5.|~Jagy}`~]C?Hg" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 161.015625 a 4 4 0 0,1 4,4  v 6  V 38  V 40 a 4 4 0 0,1 -4,4  H 61  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,0 -4,4  v 32 a 4 4 0 0,0 4,4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  H 200.015625 a 4 4 0 0,1 4,4  V 90  V 110 a 4 4 0 0,1 -4,4  h -161.015625  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="u-{f[OKi?|P7i;aJG$N?" transform="translate(141.7890625, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#d99115" d=" m 16,0  h 22.2265625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -22.2265625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">true</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">repeat</text></g><g class="blocklyEditableText" transform="translate(64.0234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="69.765625" class="blocklyFieldRect blocklyDropdownRect" stroke="#bf8013" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">until</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(49.765625,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockFlowWhile_while.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.2578125 122" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="212.2578125" height="122" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id="(=SAN8/i*beSNi7L4||u" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8013" fill="#ffab19" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 167.2578125 a 4 4 0 0,1 4,4  v 6  V 38  V 40 a 4 4 0 0,1 -4,4  H 61  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,0 -4,4  v 32 a 4 4 0 0,0 4,4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  H 206.2578125 a 4 4 0 0,1 4,4  V 90  V 110 a 4 4 0 0,1 -4,4  h -167.2578125  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="]$M5{7y(~}zPT4(n?s15" transform="translate(148.03125, 6)" style="display: block;"><path class="blocklyPath" stroke="#bf8013" fill="#d99115" d=" m 16,0  h 22.2265625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -22.2265625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">true</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">repeat</text></g><g class="blocklyEditableText" transform="translate(64.0234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="76.0078125" class="blocklyFieldRect blocklyDropdownRect" stroke="#bf8013" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">while</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(56.0078125,8.6)"/></g></g></g></svg>

doc/main/blockimg/pybricks_blockForce_ForceSensor.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.1640625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="257.1640625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id=".5+Qa4t50SW@9FqU|#V%" class="blocklyDraggable"><path class="blocklyPath" stroke="#4585a1" fill="#5cb1d6" d=" m 20,0  h 215.1640625 a 20 20 0 0,1 20,20  v 0 a 20 20 0 0,1 -20,20  V 40  h -215.1640625 a 20 20 0 0,1 -20,-20  v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="(bl?Mzf0U1-C1+qg`|.e" transform="translate(56, 4)" style="display: block;"><path class="blocklyPath" stroke="#4585a1" fill="#4e96b6" d=" m 16,0  h 108.0390625 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -108.0390625 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">force sensor</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.0390625,3)"/></g></g><g transform="translate(12,7)"><image height="25px" width="25px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNSAyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLCAwKSI+CiAgICA8cGF0aCBkPSJtMjMuNDQ5IDIzLjg0OS00LjEzOC0xNS40NjJoLTEzLjY1MWwtNC4xMzY3IDE1LjQ2eiIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KPGVsbGlwc2UgY3g9IjEyLjUiIGN5PSI0LjM3NiIgcng9IjMuMzYxNyIgcnk9IjMuMzc2IiBmaWxsPSJub25lIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(45,4.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(204.0390625,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">force</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockGlobalStart.svg

@@ -1,975 +0,0 @@
-<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129.8984375 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="129.8984375" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern8106945446883995)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-  .controlsIconStyle {
-    opacity: 0.2;
-  }
-  .controlsIconStyle:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyle:active {
-    opacity: 0.6;
-  }
-  
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-</style><g transform="translate(1, 1)"><g data-id=")1:e%2hh~lxoU6,T5B~q" class="blocklyDraggable"><path class="blocklyPath" stroke="#bf8f00" fill="#ffbf00" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 119.8984375 a 4 4 0 0,1 4,4  v 4  V 6  V 38  V 40  V 40 a 4 4 0 0,1 -4,4  h -84.8984375  c -1.6666666666666667,0  -2.5,0.75  -3.3333333333333335,1.5  l -3.3333333333333335,3  c -0.8333333333333334,0.75  -1.6666666666666667,1.5  -3.3333333333333335,1.5  h -10  c -1.6666666666666667,0  -2.5,-0.75  -3.3333333333333335,-1.5  l -3.3333333333333335,-3  c -0.8333333333333334,-0.75  -1.6666666666666667,-1.5  -3.3333333333333335,-1.5  h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g transform="translate(8,6.5)"><image height="30px" width="28px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyOCAzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLCA1KSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgxLjI0NTMgMCAwIDEuMjQ1MyAtNS42MDMzIC03LjkwMjMpIiBkPSJtMjQuNTAxIDE2LjM4My0xNy4zODYgMTAuMDM4di0yMC4wNzV6IiBmaWxsPSIjZmZmIi8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(44,6.5)"><image height="30px" width="3px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(55,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">program</text></g></g></g></svg>

doc/main/blockimg/pybricks_blockHubShutdown_CityHub.svg

@@ -1,989 +0,0 @@
-<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258.3203125 46" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="258.3203125" height="46" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
-fill: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
-fill: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;rect,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
- .blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
-stroke: #fff;
-stroke-width: 2;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-font-weight: bold;
-color: #575E75;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
-fill: #fff !important;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
-font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
-color: #fff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
-stroke: #ffffff;
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
-fill: url(#blocklyDisabledPattern29564335225952343)
-}
-.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
-fill-opacity: 0.2;
-stroke: none;
-}
-
-.blocklySvg {
-  background-color: #fff;
-  outline: none;
-  overflow: hidden;  /* IE overflows by default. */
-  position: absolute;
-  display: block;
-}
-
-.blocklyWidgetDiv {
-  display: none;
-  position: absolute;
-  z-index: 99999;  /* big value for bootstrap3 compatibility */
-}
-
-.injectionDiv {
-  height: 100%;
-  position: relative;
-  overflow: hidden;  /* So blocks in drag surface disappear at edges */
-  touch-action: none;
-}
-
-.blocklyNonSelectable {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.blocklyBlockCanvas.blocklyCanvasTransitioning,
-.blocklyBubbleCanvas.blocklyCanvasTransitioning {
-  transition: transform .5s;
-}
-
-.blocklyTooltipDiv {
-  background-color: #ffffc7;
-  border: 1px solid #ddc;
-  box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
-  color: #000;
-  display: none;
-  font: 9pt sans-serif;
-  opacity: .9;
-  padding: 2px;
-  position: absolute;
-  z-index: 100000;  /* big value for bootstrap3 compatibility */
-}
-
-.blocklyDropDownDiv {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1000;
-  display: none;
-  border: 1px solid;
-  border-color: #dadce0;
-  background-color: #fff;
-  border-radius: 2px;
-  padding: 4px;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownContent {
-  max-height: 300px;  /* @todo: spec for maximum height. */
-  overflow: auto;
-  overflow-x: hidden;
-  position: relative;
-}
-
-.blocklyDropDownArrow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  z-index: -1;
-  background-color: inherit;
-  border-color: inherit;
-}
-
-.blocklyDropDownButton {
-  display: inline-block;
-  float: left;
-  padding: 0;
-  margin: 4px;
-  border-radius: 4px;
-  outline: none;
-  border: 1px solid;
-  transition: box-shadow .1s;
-  cursor: pointer;
-}
-
-.blocklyArrowTop {
-  border-top: 1px solid;
-  border-left: 1px solid;
-  border-top-left-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyArrowBottom {
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  border-bottom-right-radius: 4px;
-  border-color: inherit;
-}
-
-.blocklyResizeSE {
-  cursor: se-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeSW {
-  cursor: sw-resize;
-  fill: #aaa;
-}
-
-.blocklyResizeLine {
-  stroke: #515A5A;
-  stroke-width: 1;
-}
-
-.blocklyHighlightedConnectionPath {
-  fill: none;
-  stroke: #fc3;
-  stroke-width: 4px;
-}
-
-.blocklyPathLight {
-  fill: none;
-  stroke-linecap: round;
-  stroke-width: 1;
-}
-
-.blocklySelected&gt;.blocklyPathLight {
-  display: none;
-}
-
-.blocklyDraggable {
-  cursor: grab;
-  cursor: -webkit-grab;
-}
-
-.blocklyDragging {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-  /* Changes cursor on mouse down. Not effective in Firefox because of
-     https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
-.blocklyDraggable:active {
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-.blocklyDragging.blocklyDraggingDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyDragging&gt;.blocklyPath,
-.blocklyDragging&gt;.blocklyPathLight {
-  fill-opacity: .8;
-  stroke-opacity: .8;
-}
-
-.blocklyDragging&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyDisabled&gt;.blocklyPath {
-  fill-opacity: .5;
-  stroke-opacity: .5;
-}
-
-.blocklyDisabled&gt;.blocklyPathLight,
-.blocklyDisabled&gt;.blocklyPathDark {
-  display: none;
-}
-
-.blocklyInsertionMarker&gt;.blocklyPath,
-.blocklyInsertionMarker&gt;.blocklyPathLight,
-.blocklyInsertionMarker&gt;.blocklyPathDark {
-  fill-opacity: .2;
-  stroke: none;
-}
-
-.blocklyMultilineText {
-  font-family: monospace;
-}
-
-.blocklyNonEditableText&gt;text {
-  pointer-events: none;
-}
-
-.blocklyFlyout {
-  position: absolute;
-  z-index: 20;
-}
-
-.blocklyText text {
-  cursor: default;
-}
-
-/*
-  Don't allow users to select text.  It gets annoying when trying to
-  drag a block and selected text moves instead.
-*/
-.blocklySvg text {
-  user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  cursor: inherit;
-}
-
-.blocklyHidden {
-  display: none;
-}
-
-.blocklyFieldDropdown:not(.blocklyHidden) {
-  display: block;
-}
-
-.blocklyIconGroup {
-  cursor: default;
-}
-
-.blocklyIconGroup:not(:hover),
-.blocklyIconGroupReadonly {
-  opacity: .6;
-}
-
-.blocklyIconShape {
-  fill: #00f;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
-.blocklyIconSymbol {
-  fill: #fff;
-}
-
-.blocklyMinimalBody {
-  margin: 0;
-  padding: 0;
-}
-
-.blocklyHtmlInput {
-  border: none;
-  border-radius: 4px;
-  height: 100%;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 100%;
-  text-align: center;
-  display: block;
-  box-sizing: border-box;
-}
-
-/* Remove the increase and decrease arrows on the field number editor */
-input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
-input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.blocklyMainBackground {
-  stroke-width: 1;
-  stroke: #c6c6c6;  /* Equates to #ddd due to border being off-pixel. */
-}
-
-.blocklyMutatorBackground {
-  fill: #fff;
-  stroke: #ddd;
-  stroke-width: 1;
-}
-
-.blocklyFlyoutBackground {
-  fill: #ddd;
-  fill-opacity: .8;
-}
-
-.blocklyMainWorkspaceScrollbar {
-  z-index: 20;
-}
-
-.blocklyFlyoutScrollbar {
-  z-index: 30;
-}
-
-.blocklyScrollbarHorizontal,
-.blocklyScrollbarVertical {
-  position: absolute;
-  outline: none;
-}
-
-.blocklyScrollbarBackground {
-  opacity: 0;
-}
-
-.blocklyScrollbarHandle {
-  fill: #ccc;
-}
-
-.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyScrollbarHandle:hover {
-  fill: #bbb;
-}
-
-/* Darken flyout scrollbars due to being on a grey background. */
-/* By contrast, workspace scrollbars are on a white background. */
-.blocklyFlyout .blocklyScrollbarHandle {
-  fill: #bbb;
-}
-
-.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
-.blocklyFlyout .blocklyScrollbarHandle:hover {
-  fill: #aaa;
-}
-
-.blocklyInvalidInput {
-  background: #faa;
-}
-
-.blocklyVerticalMarker {
-  stroke-width: 3px;
-  fill: rgba(255,255,255,.5);
-  pointer-events: none;
-}
-
-.blocklyComputeCanvas {
-  position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.blocklyNoPointerEvents {
-  pointer-events: none;
-}
-
-.blocklyContextMenu {
-  border-radius: 4px;
-  max-height: 100%;
-}
-
-.blocklyDropdownMenu {
-  border-radius: 2px;
-  padding: 0 !important;
-}
-
-.blocklyDropdownMenu .blocklyMenuItem {
-  /* 28px on the left for icon or checkbox. */
-  padding-left: 28px;
-}
-
-/* BiDi override for the resting state. */
-.blocklyDropdownMenu .blocklyMenuItemRtl {
-  /* Flip left/right padding for BiDi. */
-  padding-left: 5px;
-  padding-right: 28px;
-}
-
-.blocklyWidgetDiv .blocklyMenu {
-  background: #fff;
-  border: 1px solid transparent;
-  box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
-  font: normal 13px Arial, sans-serif;
-  margin: 0;
-  outline: none;
-  padding: 4px 0;
-  position: absolute;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
-  box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
-}
-
-.blocklyDropDownDiv .blocklyMenu {
-  background: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  border: inherit;  /* Compatibility with gapi, reset from goog-menu */
-  font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
-  outline: none;
-  position: relative;  /* Compatibility with gapi, reset from goog-menu */
-  z-index: 20000;  /* Arbitrary, but some apps depend on it... */
-}
-
-/* State: resting. */
-.blocklyMenuItem {
-  border: none;
-  color: #000;
-  cursor: pointer;
-  list-style: none;
-  margin: 0;
-  /* 7em on the right for shortcut. */
-  min-width: 7em;
-  padding: 6px 15px;
-  white-space: nowrap;
-}
-
-/* State: disabled. */
-.blocklyMenuItemDisabled {
-  color: #ccc;
-  cursor: inherit;
-}
-
-/* State: hover. */
-.blocklyMenuItemHighlight {
-  background-color: rgba(0,0,0,.1);
-}
-
-/* State: selected/checked. */
-.blocklyMenuItemCheckbox {
-  height: 16px;
-  position: absolute;
-  width: 16px;
-}
-
-.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
-  background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
-  float: left;
-  margin-left: -24px;
-  position: static;  /* Scroll with the menu. */
-}
-
-.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
-  float: right;
-  margin-right: -24px;
-}
-
-
-.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
-  opacity: .4;
-}
-
-.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
-  opacity: .6;
-}
-
-.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
-  opacity: .8;
-}
-
-
-.blocklyCommentForeignObject {
-  position: relative;
-  z-index: 0;
-}
-
-.blocklyCommentRect {
-  fill: #E7DE8E;
-  stroke: #bcA903;
-  stroke-width: 1px;
-}
-
-.blocklyCommentTarget {
-  fill: transparent;
-  stroke: #bcA903;
-}
-
-.blocklyCommentTargetFocused {
-  fill: none;
-}
-
-.blocklyCommentHandleTarget {
-  fill: none;
-}
-
-.blocklyCommentHandleTargetFocused {
-  fill: transparent;
-}
-
-.blocklyFocused&gt;.blocklyCommentRect {
-  fill: #B9B272;
-  stroke: #B9B272;
-}
-
-.blocklySelected&gt;.blocklyCommentTarget {
-  stroke: #fc3;
-  stroke-width: 3px;
-}
-
-.blocklyCommentDeleteIcon {
-  cursor: pointer;
-  fill: #000;
-  display: none;
-}
-
-.blocklySelected &gt; .blocklyCommentDeleteIcon {
-  display: block;
-}
-
-.blocklyDeleteIconShape {
-  fill: #000;
-  stroke: #000;
-  stroke-width: 1px;
-}
-
-.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
-  stroke: #fc3;
-}
-
-
-.blocklyCommentTextarea {
-  background-color: #fef49c;
-  border: 0;
-  display: block;
-  margin: 0;
-  outline: 0;
-  padding: 3px;
-  resize: none;
-  text-overflow: hidden;
-}
-
-
-.blocklyAngleCircle {
-  stroke: #444;
-  stroke-width: 1;
-  fill: #ddd;
-  fill-opacity: 0.8;
-}
-
-.blocklyAngleMarks {
-  stroke: #444;
-  stroke-width: 1;
-}
-
-.blocklyAngleGauge {
-  fill: #f88;
-  fill-opacity: 0.8;
-  pointer-events: none;
-}
-
-.blocklyAngleLine {
-  stroke: #f00;
-  stroke-width: 2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.blocklyHtmlTextAreaInput {
-  font-family: monospace;
-  resize: none;
-  overflow: hidden;
-  height: 100%;
-  text-align: left;
-}
-
-.blocklyHtmlTextAreaInputOverflowedY {
-  overflow-y: scroll;
-}
-
-
-.blocklyFlyoutButton {
-  fill: #888;
-  cursor: default;
-}
-
-.blocklyFlyoutButtonShadow {
-  fill: #666;
-}
-
-.blocklyFlyoutButton:hover {
-  fill: #aaa;
-}
-
-.blocklyFlyoutLabel {
-  cursor: default;
-}
-
-.blocklyFlyoutLabelBackground {
-  opacity: 0;
-}
-
-
-.blocklyTreeRow:not(.blocklyTreeSelected):hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
-  margin: 1px 5px 1px 0;
-}
-
-.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
-  margin: 1px 0 1px 5px;
-}
-
-.blocklyTreeRow {
-  height: 22px;
-  line-height: 22px;
-  margin-bottom: 3px;
-  padding-right: 8px;
-  white-space: nowrap;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
-  margin-left: 8px;
-  padding-right: 0;
-}
-
-.blocklyTreeIcon {
-  background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
-  height: 16px;
-  vertical-align: middle;
-  visibility: hidden;
-  width: 16px;
-}
-
-.blocklyTreeIconClosed {
-  background-position: -32px -1px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
-  background-position: 0 -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: -32px -17px;
-}
-
-.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
-  background-position: 0 -17px;
-}
-
-.blocklyTreeIconOpen {
-  background-position: -16px -1px;
-}
-
-.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
-  background-position: -16px -17px;
-}
-
-.blocklyTreeLabel {
-  cursor: default;
-  font: 16px sans-serif;
-  padding: 0 3px;
-  vertical-align: middle;
-}
-
-.blocklyToolboxDelete .blocklyTreeLabel {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyTreeSelected .blocklyTreeLabel {
-  color: #fff;
-}
-
-
-.blocklyTreeSeparator {
-  border-bottom: solid #e5e5e5 1px;
-  height: 0;
-  margin: 5px 0;
-}
-
-.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
-  border-right: solid #e5e5e5 1px;
-  border-bottom: none;
-  height: auto;
-  margin: 0 5px 0 5px;
-  padding: 5px 0;
-  width: 0;
-}
-
-
-.blocklyToolboxDelete {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
-}
-
-.blocklyToolboxGrab {
-  cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
-  cursor: grabbing;
-  cursor: -webkit-grabbing;
-}
-
-/* Category tree in Toolbox. */
-.blocklyToolboxDiv {
-  background-color: #ddd;
-  overflow-x: visible;
-  overflow-y: auto;
-  padding: 4px 0 4px 0;
-  position: absolute;
-  z-index: 70;  /* so blocks go under toolbox when dragging */
-  -webkit-tap-highlight-color: transparent;  /* issue #1345 */
-}
-
-.blocklyToolboxContents {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-
-.blocklyToolboxContents:focus {
-  outline: none;
-}
-
-
-.blocklyColourTable {
-  border-collapse: collapse;
-  display: block;
-  outline: none;
-  padding: 1px;
-}
-
-.blocklyColourTable&gt;tr&gt;td {
-  border: 0.5px solid #888;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: inline-block;
-  height: 20px;
-  padding: 0;
-  width: 20px;
-}
-
-.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
-  border-color: #eee;
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
-  position: relative;
-}
-
-.blocklyColourSelected, .blocklyColourSelected:hover {
-  border-color: #eee !important;
-  outline: 1px solid #333;
-  position: relative;
-}
-
-
-.fieldColourSliderContainer {
-  padding: 4px;
-}
-.fieldColourSliderContainer hr {
-  border: none;
-  border-top: 1px solid #bbb;
-}
-.fieldColourSliderLabel {
-  display: flex;
-  justify-content: space-between;
-  font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
-}
-.fieldColourEyedropper {
-  appearance: none;
-  position: relative;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.fieldColourEyedropper:hover {
-  background: rgba(0,0,0,0.1)
-}
-.fieldColourEyedropper input {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.fieldColourEyedropper::before {
-  content: "Eyedropper";
-}
-.fieldColourEyedropper::after {
-  content: "";
-  margin-left: 8px;
-  width: 24px;
-  height: 24px;
-  background: currentColor;
-  pointer-events: none;
-  -webkit-mask-image: var(--customize-dial-symbol);
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  mask-image: var(--customize-dial-symbol);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  --customize-dial-symbol: url('data:image/svg+xml,    &lt;svg xmlns="http://www.w3.org/2000/svg"          width="24px" height="24px"          viewBox="0 0 24 24"&gt;       &lt;path stroke="black" strokewidth="1.414" fill="none"             d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22                 Q 6 21 9 18 L 16 11"/&gt;       &lt;path fill="black"             d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5                 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt;     &lt;/svg&gt;');
-}
-.fieldColourSlider {
-  -webkit-appearance: none;
-  width: 150px;
-  height: 24px;
-  margin: 4px 8px 24px 8px;
-  padding: 0;
-}
-.fieldColourSlider:last-child {
-  margin-bottom: 4px;
-}
-.fieldColourSlider:focus {
-  outline: none;
-}
-/* Webkit */
-.fieldColourSlider::-webkit-slider-runnable-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  margin-top: -4px;
-}
-/* Firefox */
-.fieldColourSlider::-moz-range-track {
-  background: var(--slider-track-background);
-  border-radius: 8px;
-  height: 16px;
-}
-.fieldColourSlider::-moz-range-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-.fieldColourSlider::-moz-focus-outer {
-  /* override the focus border style */
-  border: 0;
-}
-/* IE */
-.fieldColourSlider::-ms-track {
-  background: var(--slider-track-background);
-  border-radius: 12px;
-  width: 100%;
-  height: 24px;
-  /* remove default tick marks */
-  color: transparent;
-}
-.fieldColourSlider::-ms-fill-lower  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-fill-upper  {
-  background: transparent;
-}
-.fieldColourSlider::-ms-thumb {
-  background: #fff;
-  border: none;
-  border-radius: 50%;
-  box-shadow: 0 0 0 4px rgba(0,0,0,.15);
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-}
-
-
-.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
-  opacity: .2;
-}
-
-.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
-  opacity: .4;
-}
-
-.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
-  opacity: .6;
-}
-
-
-  .controlsIconStyleLightTheme {
-    opacity: 0.2;
-  }
-  .controlsIconStyleLightTheme:hover {
-    opacity: 0.4;
-  }
-  .controlsIconStyleLightTheme:active {
-    opacity: 0.6;
-  }
-  
-
-  .controlsIconStyleDarkTheme {
-    opacity: 0.4;
-    filter: invert(1);
-  }
-  .controlsIconStyleDarkTheme:hover {
-    opacity: 0.6;
-    filter: invert(1);
-  }
-  .controlsIconStyleDarkTheme:active {
-    opacity: 0.8;
-    filter: invert(1);
-  }
-  
-</style><g transform="translate(1, 1)"><g data-id="vx|Un1Sh:}Uz/sQ0AwNA" class="blocklyDraggable"><path class="blocklyPath" stroke="#74567a" fill="#9a72a2" d=" m 0,0  m 0,4 a 4 4 0 0,1 4,-4  h 5  c 1.6666666666666667,0  2.5,0.75  3.3333333333333335,1.5  l 3.3333333333333335,3  c 0.8333333333333334,0.75  1.6666666666666667,1.5  3.3333333333333335,1.5  h 10  c 1.6666666666666667,0  2.5,-0.75  3.3333333333333335,-1.5  l 3.3333333333333335,-3  c 0.8333333333333334,-0.75  1.6666666666666667,-1.5  3.3333333333333335,-1.5  h 213.3203125 a 4 4 0 0,1 4,4  v 6  V 38  V 40  V 40 a 4 4 0 0,1 -4,4  h -248.3203125 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="ktT=F4Q`@V$1g51|Dsf%" transform="translate(55, 6)" style="display: block;"><path class="blocklyPath" stroke="#74567a" fill="#83618a" d=" m 16,0  h 73.3359375 a 16 16 0 0,1 16,16  v 0 a 16 16 0 0,1 -16,16  V 32  h -73.3359375 a 16 16 0 0,1 -16,-16  v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: default;"><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="0" y="9">city hub</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(69.3359375,3)"/></g></g><g transform="translate(8,6.5)"><image height="30px" width="28px" alt="*" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyOCAzMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLCA1KSI+CiAgICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSgtNDUpIiBkPSJtNy4yMDkyIDE2LjgzNGE5IDkgMCAwIDEtNC4xOTMzIDEwLjEyNCA5IDkgMCAwIDEtMTAuODY0LTEuNDMwMyA5IDkgMCAwIDEtMS40MzAzLTEwLjg2NCA5IDkgMCAwIDEgMTAuMTI0LTQuMTkzMyIgZmlsbD0ibm9uZSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxwYXRoIGQ9Im0xMi45MSAxLjQ2ODF2MTAuOTYyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyLjUiLz4KICA8L2c+Cjwvc3ZnPg=="/></g><g transform="translate(44,6.5)"><image height="30px" width="3px" alt="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDApIj4KICAgIDxwYXRoIGQ9Im0yLjUgMC41djI5IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW9wYWNpdHk9Ii4yNjI1Ii8+CiAgPC9nPgo8L3N2Zz4="/></g><g transform="translate(168.3359375,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">shut down</text></g></g></g></svg>