<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright © 2020 Apple Inc. All rights reserved. -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
            g:not(:target) {
                display: none;
            }

            .light {
                --border: black;
                --corner: hsl(0, 0%, 100%);
                --paper: hsl(0, 0%, 90%);
                --css-color: hsl(2, 84%, 33%);
                --font-color: hsl(212, 43%, 28%);
                --gl-color: hsl(208, 48%, 35%);
                --js-color: hsl(265, 61%, 51%);
                --markup-color: hsl(226, 77%, 44%);
                --square-color: hsl(141, 28%, 42%);
                --circle-color: hsl(205, 35%, 33%);
            }

            .dark {
                --border: white;
                --corner: hsl(0, 0%, 0%);
                --paper: hsl(0, 0%, 18%);
                --css-color: hsl(360, 100%, 70%);
                --font-color: hsl(212, 73%, 63%);
                --gl-color: hsl(208, 65%, 57%);
                --js-color: hsl(255, 100%, 80%);
                --markup-color: hsl(226, 100%, 70%);
                --square-color: hsl(141, 28%, 50%);
                --circle-color: hsl(205, 91%, 47%);
            }

            .markup.override.light {
                --border: hsl(226, 70%, 75%);
                --paper: hsl(226, 77%, 44%);
                --markup-color: hsl(0, 0%, 100%);
            }

            .markup.override.dark {
                --border: hsl(226, 30%, 20%);
                --paper: hsl(226, 100%, 70%);
                --markup-color: hsl(0, 0%, 0%);
            }

            .css.override.light {
                --border: hsl(2, 70%, 75%);
                --paper: hsl(2, 54%, 33%);
                --css-color: hsl(0, 0%, 100%);
            }

            .css.override.dark {
                --border: hsl(360, 50%, 20%);
                --paper: hsl(360, 54%, 61%);
                --css-color: hsl(0, 0%, 0%);
            }

            .font.override.light {
                --border: hsl(212, 43%, 75%);
                --paper: hsl(212, 43%, 28%);
                --font-color: hsl(0, 0%, 100%);
            }

            .font.override.dark {
                --border: hsl(212, 50%, 20%);
                --paper: hsl(212, 73%, 63%);
                --font-color: hsl(0, 0%, 0%);
            }

            .gl.override.light {
                --border: hsl(208, 48%, 80%);
                --paper: hsl(208, 48%, 35%);
                --gl-color: hsl(0, 0%, 100%);
            }

            .gl.override.dark {
                --border: hsl(208, 65%, 20%);
                --paper: hsl(208, 65%, 57%);
                --gl-color: hsl(0, 0%, 0%);
            }

            .image.override.light {
                --border: hsl(141, 28%, 85%);
                --paper: hsl(141, 28%, 50%);
                --square-color: hsl(0, 0%, 100%);
                --circle-color: hsla(0, 0%, 100%, 0.7);
            }

            .image.override.dark {
                --border: hsl(141, 28%, 16%);
                --paper: hsl(141, 28%, 50%);
                --square-color: hsla(0, 0%, 0%, 0.7);
                --circle-color: hsl(0, 0%, 0%);
            }

            .js.override.light,
            .worker.override.light {
                --border: hsl(265, 50%, 75%);
                --paper: hsl(265, 61%, 51%);
                --js-color: hsl(0, 0%, 100%);
            }

            .js.override.dark,
            .worker.override.dark {
                --border: hsl(255, 50%, 20%);
                --paper: hsl(255, 100%, 80%);
                --js-color: hsl(0, 0%, 0%);
            }
        </style>
    </defs>
    
    <symbol id="doc" stroke-width="1" viewBox="0 0 32 32">
        <path fill="var(--corner)" stroke="var(--border)" d="M 5.496 0.503 L 16.095 0.503 C 16.352 0.503 16.599 0.602 16.785 0.779 L 27.190 10.704 C 27.388 10.893 27.5 11.154 27.5 11.427 L 27.5 30.5 C 27.5 30.998 27.002 31.497 26.501 31.497 L 5.5 31.497 C 4.998 31.497 4.5 30.997 4.5 30.5 L 4.5 1.497 C 4.5 1.004 5 0.503 5.496 0.503 Z"/>
        <path fill="var(--paper)" stroke="var(--border)" d="M 13.079 0.503 C 16.632 0.503 17.505 0.466 17.505 3.336 L 17.505 10.501 L 24.573 10.501 C 27.378 10.501 27.5 12.822 27.5 15.708 L 27.5 30.498 C 27.5 30.999 27.004 31.497 26.500 31.497 L 5.508 31.497 C 4.998 31.497 4.5 31.003 4.5 30.498 L 4.5 1.498 C 4.5 1.003 4.998 0.502 5.501 0.502 L 13.079 0.503 Z"/>
    </symbol>
    
    <symbol id="css" stroke="none" fill="var(--css-color)" viewBox="0 0 32 32">
        <path d="M 10.076 24.538 C 10.862 24.538 11.352 23.903 11.368 22.877 L 12.887 22.877 C 12.887 24.874 11.811 26.096 10.082 26.096 C 8.199 26.096 7.092 24.734 7.092 22.413 L 7.092 20.612 C 7.092 18.291 8.199 16.929 10.082 16.929 C 11.832 16.929 12.871 18.144 12.882 20.227 L 11.363 20.227 C 11.347 19.170 10.830 18.486 10.055 18.486 C 9.132 18.486 8.647 19.219 8.647 20.612 L 8.647 22.413 C 8.647 23.812 9.132 24.538 10.076 24.538 Z M 13.772 23.451 L 15.091 23.451 C 15.155 24.215 15.657 24.654 16.464 24.654 C 17.232 24.654 17.719 24.196 17.719 23.482 C 17.719 22.883 17.404 22.566 16.582 22.340 L 15.844 22.126 C 14.559 21.766 13.929 20.923 13.929 19.616 C 13.929 17.973 14.909 16.929 16.444 16.929 C 17.931 16.929 18.930 17.961 18.974 19.537 L 17.655 19.537 C 17.601 18.810 17.153 18.364 16.459 18.364 C 15.755 18.364 15.317 18.773 15.317 19.433 C 15.317 20.056 15.632 20.398 16.400 20.605 L 17.128 20.813 C 18.502 21.192 19.102 21.955 19.102 23.305 C 19.102 25.045 18.098 26.096 16.439 26.096 C 14.830 26.096 13.821 25.100 13.772 23.451 Z M 19.738 23.451 L 21.057 23.451 C 21.121 24.215 21.623 24.654 22.430 24.654 C 23.198 24.654 23.685 24.196 23.685 23.482 C 23.685 22.883 23.370 22.566 22.548 22.340 L 21.810 22.126 C 20.525 21.766 19.895 20.923 19.895 19.616 C 19.895 17.973 20.875 16.929 22.410 16.929 C 23.897 16.929 24.896 17.961 24.940 19.537 L 23.621 19.537 C 23.567 18.810 23.119 18.364 22.425 18.364 C 21.721 18.364 21.283 18.773 21.283 19.433 C 21.283 20.056 21.598 20.398 22.366 20.605 L 23.094 20.813 C 24.468 21.192 25.068 21.955 25.068 23.305 C 25.068 25.045 24.064 26.096 22.405 26.096 C 20.796 26.096 19.787 25.100 19.738 23.451 Z"/>
    </symbol>

    <symbol id="font" stroke="none" fill="var(--font-color)" viewBox="0 0 32 32">
        <path d="M 22.897 28.003 L 17.397 28.003 L 17.397 27.644 C 18.811 27.577 19.126 27.217 19.126 26.454 C 19.126 26.275 19.103 26.073 19.081 25.870 L 18.632 22.930 L 13.693 22.930 L 12.368 25.421 C 12.054 26.005 11.875 26.544 11.875 26.903 C 11.875 27.330 12.211 27.599 13.266 27.644 L 13.266 28.003 L 9.091 28.003 L 9.091 27.644 C 10.123 27.442 10.415 27.060 12.099 24.142 L 18.497 13.007 L 19.081 13.007 L 21.146 25.421 C 21.460 27.307 21.707 27.554 22.897 27.644 L 22.897 28.003 Z M 18.520 22.121 L 17.509 16.217 L 14.164 22.121 L 18.520 22.121 Z"/>
    </symbol>

    <symbol id="image" stroke="none" viewBox="0 0 32 32">
        <path fill="var(--square-color)" d="M 14.732 18.001 C 14.732 18.002 14.732 18.003 14.732 18.004 C 14.732 20.545 16.628 22.643 19.082 22.962 L 19.082 26.142 C 19.082 27.378 18.445 28.002 17.197 28.002 L 10.879 28.002 C 9.631 28.002 9 27.378 9 26.142 L 9 19.861 C 9 18.625 9.631 18.001 10.879 18.001 L 14.732 18.001 Z"/>
        <circle cx="19.732" cy="18.004" r="4" fill="var(--circle-color)"/>
    </symbol>
    
    <symbol id="gl" stroke="none" fill="var(--gl-color)" viewBox="0 0 32 32">
        <path d="M 12.349 28.333 C 10.393 28.333 9.115 27.506 8.992 26.166 L 10.817 26.166 C 10.947 26.652 11.549 26.959 12.376 26.959 C 13.463 26.959 14.037 26.467 14.037 25.524 L 14.037 24.040 L 13.893 24.040 C 13.661 24.888 12.786 25.455 11.665 25.455 C 9.929 25.455 8.890 24.252 8.890 22.215 L 8.890 21.073 C 8.890 19.016 9.949 17.833 11.754 17.833 C 12.848 17.833 13.688 18.387 13.934 19.241 L 14.071 19.241 L 14.071 17.956 L 15.910 17.956 L 15.910 25.489 C 15.910 27.246 14.550 28.333 12.349 28.333 Z M 10.804 22.160 C 10.804 23.186 11.426 23.828 12.403 23.828 C 13.388 23.828 14.010 23.186 14.010 22.160 L 14.010 21.073 C 14.010 20.048 13.388 19.405 12.403 19.405 C 11.426 19.405 10.804 20.048 10.804 21.073 L 10.804 22.160 Z M 23.538 25.496 L 17.023 25.496 L 17.023 24.006 L 19.416 24.006 L 19.416 16.575 L 17.146 16.575 L 17.146 15.085 L 21.289 15.085 L 21.289 24.006 L 23.538 24.006 L 23.538 25.496 Z"/>
    </symbol>
    
    <symbol id="js" stroke="none" fill="var(--js-color)" viewBox="0 0 32 32">
        <path  d="M 11.759 26.261 C 9.749 26.261 8.451 25.037 8.444 23.137 L 10.317 23.137 C 10.337 23.964 10.905 24.504 11.732 24.504 C 12.634 24.504 13.126 23.957 13.126 22.952 L 13.126 17.866 L 9.585 17.866 L 9.585 16.198 L 15.075 16.198 L 15.075 22.979 C 15.075 25.051 13.844 26.261 11.759 26.261 Z M 15.849 23.301 L 17.681 23.301 C 17.770 24.155 18.468 24.647 19.589 24.647 C 20.655 24.647 21.332 24.135 21.332 23.335 C 21.332 22.665 20.894 22.310 19.753 22.057 L 18.727 21.817 C 16.943 21.414 16.068 20.471 16.068 19.008 C 16.068 17.169 17.429 16 19.561 16 C 21.626 16 23.013 17.155 23.075 18.919 L 21.243 18.919 C 21.168 18.105 20.546 17.606 19.582 17.606 C 18.604 17.606 17.996 18.064 17.996 18.803 C 17.996 19.5 18.433 19.883 19.500 20.115 L 20.512 20.348 C 22.419 20.771 23.253 21.626 23.253 23.137 C 23.253 25.085 21.858 26.261 19.554 26.261 C 17.319 26.261 15.918 25.146 15.849 23.301 Z"/>
    </symbol>

    <symbol id="markup" stroke="none" fill="var(--markup-color)" viewBox="0 0 32 32">
        <polygon points="13.934 18.615 9.693 21.088 9.693 21.256 13.934 23.73 13.934 26.337 7.739 22.187 7.739 20.158 13.934 15.999"/>
        <polygon points="22.302 21.088 18.061 18.615 18.061 15.999 24.256 20.158 24.256 22.187 18.061 26.337 18.061 23.73 22.302 21.256"/>
    </symbol>

    <symbol id="worker" stroke="var(--js-color)" fill="none" stroke-width="1.4" viewBox="0 0 32 32">
        <path d="M 16 27.411 C 16.817 27.411 17.485 26.743 17.486 25.926 L 17.485 25.159 C 17.630 25.108 17.772 25.051 17.909 24.987 L 18.648 25.726 C 19.226 26.304 20.171 26.303 20.747 25.725 C 21.037 25.436 21.181 25.054 21.181 24.674 C 21.181 24.295 21.037 23.914 20.748 23.625 L 20.010 22.887 C 20.075 22.748 20.131 22.606 20.182 22.462 L 20.949 22.461 C 21.766 22.462 22.434 21.794 22.434 20.977 C 22.434 20.160 21.766 19.492 20.949 19.491 L 20.182 19.492 C 20.131 19.347 20.075 19.205 20.010 19.068 L 20.748 18.329 C 21.036 18.040 21.181 17.659 21.181 17.279 C 21.181 16.898 21.037 16.518 20.749 16.230 C 20.171 15.651 19.226 15.651 18.649 16.228 L 17.909 16.967 C 17.771 16.901 17.630 16.847 17.485 16.795 L 17.485 16.027 C 17.485 15.210 16.817 14.542 16 14.542 C 15.183 14.542 14.515 15.210 14.515 16.027 L 14.515 16.795 C 14.371 16.847 14.228 16.902 14.090 16.967 L 13.351 16.229 C 12.774 15.652 11.829 15.652 11.252 16.229 C 10.963 16.518 10.818 16.898 10.818 17.278 C 10.818 17.659 10.963 18.039 11.251 18.328 L 11.990 19.068 C 11.925 19.205 11.870 19.347 11.818 19.492 L 11.051 19.491 C 10.234 19.492 9.566 20.160 9.566 20.977 C 9.566 21.794 10.234 22.462 11.051 22.462 L 11.818 22.462 C 11.869 22.606 11.925 22.748 11.990 22.887 L 11.252 23.625 C 10.963 23.914 10.817 24.295 10.818 24.675 C 10.817 25.056 10.964 25.437 11.251 25.724 C 11.829 26.303 12.774 26.303 13.351 25.725 L 14.091 24.987 C 14.228 25.051 14.370 25.108 14.515 25.159 L 14.514 25.926 C 14.515 26.743 15.183 27.411 16 27.411 Z"/>
        <path d="M 15.999 19.096 C 17.036 19.096 17.880 19.940 17.880 20.977 C 17.880 22.015 17.036 22.858 15.999 22.858 C 14.962 22.858 14.118 22.015 14.118 20.977 C 14.118 19.940 14.962 19.096 15.999 19.096"/>
    </symbol>

    <symbol id="websocket" stroke-width="1" viewBox="0 0 32 32">
        <path fill="var(--corner)" fill-opacity="1" stroke="var(--border)" d="M 5.5 0.5 L 26.5 0.5 C 27 0.5 27.5 1 27.5 1.5 L 27.5 30.5 C 27.5 31 27 31.5 26.5 31.5 L 5.5 31.5 C 5 31.5 4.5 31 4.5 30.5 L 4.5 1.5 C 4.5 1 5 0.5 5.5 0.5 Z"/>
        <polygon fill="var(--paper)" points="26 3 26 30 6 30 6 3"/>
        <path fill="var(--js-color)" d="M 15.569 8.864 C 15.388 8.932 15.224 9.038 15.076 9.181 L 15.076 9.181 L 11.083 13.175 C 10.532 13.725 10.532 14.621 11.083 15.171 L 11.083 15.171 C 11.633 15.723 12.528 15.723 13.079 15.171 L 13.079 15.171 L 16.098 12.152 L 19.107 15.161 C 19.657 15.712 20.552 15.712 21.103 15.161 L 21.103 15.161 C 21.654 14.610 21.654 13.715 21.103 13.164 L 21.103 13.164 L 17.110 9.171 C 16.833 8.894 16.473 8.756 16.111 8.756 L 16.111 8.756 C 15.927 8.756 15.743 8.792 15.569 8.864 L 15.569 8.864 Z"/>
        <path fill="var(--js-color)" d="M 14.758 16.941 C 14.758 17.692 15.367 18.297 16.114 18.297 L 16.114 18.297 C 16.861 18.297 17.470 17.692 17.470 16.941 L 17.470 16.941 C 17.470 16.188 16.861 15.585 16.114 15.585 L 16.114 15.585 C 15.367 15.585 14.758 16.188 14.758 16.941 L 14.758 16.941 Z"/>
        <path fill="var(--js-color)" d="M 19.187 18.710 L 16.168 21.729 L 13.159 18.721 C 12.608 18.169 11.714 18.169 11.163 18.721 L 11.163 18.721 C 10.612 19.271 10.612 20.166 11.163 20.717 L 11.163 20.717 L 15.157 24.711 C 15.575 25.130 16.184 25.230 16.698 25.019 L 16.698 25.019 C 16.878 24.949 17.042 24.843 17.190 24.700 L 17.190 24.700 L 21.184 20.707 C 21.735 20.155 21.735 19.261 21.184 18.710 L 21.184 18.710 C 20.909 18.434 20.547 18.297 20.185 18.297 L 20.185 18.297 C 19.824 18.297 19.462 18.434 19.187 18.710 L 19.187 18.710 Z"/>
    </symbol>

    <g id="generic-light" class="light"><use href="#doc"/></g>
    <g id="generic-light-override" class="light override"><use href="#doc"/></g>
    <g id="generic-dark" class="dark"><use href="#doc"/></g>
    <g id="generic-dark-override" class="dark override"><use href="#doc"/></g>
    <g id="css-light" class="light"><use href="#doc"/><use href="#css"/></g>
    <g id="css-light-override" class="css light override"><use href="#doc"/><use href="#css"/></g>
    <g id="css-dark" class="dark"><use href="#doc"/><use href="#css"/></g>
    <g id="css-dark-override" class="css dark override"><use href="#doc"/><use href="#css"/></g>
    <g id="font-light" class="light"><use href="#doc"/><use href="#font"/></g>
    <g id="font-light-override" class="font light override"><use href="#doc"/><use href="#font"/></g>
    <g id="font-dark" class="dark"><use href="#doc"/><use href="#font"/></g>
    <g id="font-dark-override" class="font dark override"><use href="#doc"/><use href="#font"/></g>
    <g id="image-light" class="light"><use href="#doc"/><use href="#image"/></g>
    <g id="image-light-override" class="image light override"><use href="#doc"/><use href="#image"/></g>
    <g id="image-dark" class="dark"><use href="#doc"/><use href="#image"/></g>
    <g id="image-dark-override" class="image dark override"><use href="#doc"/><use href="#image"/></g>
    <g id="gl-light" class="light"><use href="#doc"/><use href="#gl"/></g>
    <g id="gl-light-override" class="gl light override"><use href="#doc"/><use href="#gl"/></g>
    <g id="gl-dark" class="dark"><use href="#doc"/><use href="#gl"/></g>
    <g id="gl-dark-override" class="gl dark override"><use href="#doc"/><use href="#gl"/></g>
    <g id="js-light" class="light"><use href="#doc"/><use href="#js"/></g>
    <g id="js-light-override" class="js light override"><use href="#doc"/><use href="#js"/></g>
    <g id="js-dark" class="dark"><use href="#doc"/><use href="#js"/></g>
    <g id="js-dark-override" class="js dark override"><use href="#doc"/><use href="#js"/></g>
    <g id="markup-light" class="light"><use href="#doc"/><use href="#markup"/></g>
    <g id="markup-light-override" class="markup light override"><use href="#doc"/><use href="#markup"/></g>
    <g id="markup-dark" class="dark"><use href="#doc"/><use href="#markup"/></g>
    <g id="markup-dark-override" class="markup dark override"><use href="#doc"/><use href="#markup"/></g>
    <g id="websocket-light" class="light"><use href="#websocket"/></g>
    <g id="websocket-dark" class="dark"><use href="#websocket"/></g>
    <g id="worker-light" class="light"><use href="#doc"/><use href="#worker"/></g>
    <g id="worker-light-override" class="worker light override"><use href="#doc"/><use href="#worker"/></g>
    <g id="worker-dark" class="dark"><use href="#doc"/><use href="#worker"/></g>
    <g id="worker-dark-override" class="worker dark override"><use href="#doc"/><use href="#worker"/></g>
</svg>