From e3ce26d9c39d2e102200b424fb0f1ea8e865e5e1 Mon Sep 17 00:00:00 2001 From: mertJF Date: Mon, 19 Apr 2021 10:58:40 +0300 Subject: [PATCH] Updates --- CNAME | 1 - asset-manifest.json | 8 ++++---- index.html | 2 +- ... precache-manifest.7d55140b1a1ffc363eeeb70538431504.js | 8 ++++---- service-worker.js | 2 +- static/css/main.8f090900.chunk.css.map | 1 - .../{main.8f090900.chunk.css => main.e3b2134c.chunk.css} | 4 ++-- static/css/main.e3b2134c.chunk.css.map | 1 + 8 files changed, 13 insertions(+), 14 deletions(-) delete mode 100644 CNAME rename precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js => precache-manifest.7d55140b1a1ffc363eeeb70538431504.js (72%) delete mode 100644 static/css/main.8f090900.chunk.css.map rename static/css/{main.8f090900.chunk.css => main.e3b2134c.chunk.css} (97%) create mode 100644 static/css/main.e3b2134c.chunk.css.map diff --git a/CNAME b/CNAME deleted file mode 100644 index 0658b02..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -tailblocks.cc \ No newline at end of file diff --git a/asset-manifest.json b/asset-manifest.json index 5b5e957..0e9e0f0 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,6 +1,6 @@ { "files": { - "main.css": "/static/css/main.8f090900.chunk.css", + "main.css": "/static/css/main.e3b2134c.chunk.css", "main.js": "/static/js/main.cf85ad59.chunk.js", "main.js.map": "/static/js/main.cf85ad59.chunk.js.map", "runtime-main.js": "/static/js/runtime-main.aaf441fc.js", @@ -8,15 +8,15 @@ "static/js/2.222019e5.chunk.js": "/static/js/2.222019e5.chunk.js", "static/js/2.222019e5.chunk.js.map": "/static/js/2.222019e5.chunk.js.map", "index.html": "/index.html", - "precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js": "/precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js", + "precache-manifest.7d55140b1a1ffc363eeeb70538431504.js": "/precache-manifest.7d55140b1a1ffc363eeeb70538431504.js", "service-worker.js": "/service-worker.js", - "static/css/main.8f090900.chunk.css.map": "/static/css/main.8f090900.chunk.css.map", + "static/css/main.e3b2134c.chunk.css.map": "/static/css/main.e3b2134c.chunk.css.map", "static/js/2.222019e5.chunk.js.LICENSE.txt": "/static/js/2.222019e5.chunk.js.LICENSE.txt" }, "entrypoints": [ "static/js/runtime-main.aaf441fc.js", "static/js/2.222019e5.chunk.js", - "static/css/main.8f090900.chunk.css", + "static/css/main.e3b2134c.chunk.css", "static/js/main.cf85ad59.chunk.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index e9ff1a8..9413af2 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Tailblocks — Ready-to-use Tailwind CSS blocks
\ No newline at end of file +Tailblocks — Ready-to-use Tailwind CSS blocks
\ No newline at end of file diff --git a/precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js b/precache-manifest.7d55140b1a1ffc363eeeb70538431504.js similarity index 72% rename from precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js rename to precache-manifest.7d55140b1a1ffc363eeeb70538431504.js index d15aeb1..05b7b2f 100644 --- a/precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js +++ b/precache-manifest.7d55140b1a1ffc363eeeb70538431504.js @@ -1,11 +1,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "3bf9686611d511b88b9939f9744daa71", + "revision": "8ab9cd20916a1222b55a31fd0d07bf4d", "url": "/index.html" }, { - "revision": "4c267fddf37b60e44342", - "url": "/static/css/main.8f090900.chunk.css" + "revision": "2e306123c134c203caaa", + "url": "/static/css/main.e3b2134c.chunk.css" }, { "revision": "fd33239b15e434520b52", @@ -16,7 +16,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "/static/js/2.222019e5.chunk.js.LICENSE.txt" }, { - "revision": "4c267fddf37b60e44342", + "revision": "2e306123c134c203caaa", "url": "/static/js/main.cf85ad59.chunk.js" }, { diff --git a/service-worker.js b/service-worker.js index 4a221c3..bf01d91 100644 --- a/service-worker.js +++ b/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "/precache-manifest.61cea92cad6bb4920ecaa4f810e46a93.js" + "/precache-manifest.7d55140b1a1ffc363eeeb70538431504.js" ); self.addEventListener('message', (event) => { diff --git a/static/css/main.8f090900.chunk.css.map b/static/css/main.8f090900.chunk.css.map deleted file mode 100644 index 6b12d2f..0000000 --- a/static/css/main.8f090900.chunk.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["main.8f090900.chunk.css","index.css"],"names":[],"mappings":"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,CAEA,gBACE,UAAW,CACX,OACF,CAEA,8BACE,SACF,CAEA,yBAKE,iCACE,YACF,CACF,CAEA,yBACE,gBACE,YACF,CAEA,QACE,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,iBAAkB,CAClB,kBACF,CAEA,eACE,UAAW,CACX,WACF,CAEA,MACE,gBACF,CAEA,SACE,SACF,CAEA,UACE,cAAe,CACf,WAAY,CACZ,SAAU,CACV,qBAAsB,CACtB,wBAAiC,CAAjC,gCAAiC,CACjC,WACF,CAEA,qBACE,wBACF,CAEA,uBACE,cACF,CACF,CAEA,yBACE,QACE,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,kBACF,CAEA,YACE,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,UAAW,CACX,sCAAgC,CAAhC,8BACF,CAEA,mBACE,iBACF,CAEA,uBACE,aACF,CAEA,UACE,UACF,CACF,CAEA,WACE,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,eAAgB,CAChB,eAAmB,CACnB,iBAAkB,CAClB,cAAe,CACf,uHAAgI,CAChI,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,wBAAyB,CACzB,kBACF,CAEA,aAEE,oBACF,CAEA,gCAJE,aAMF,CAEA,gBACE,aAAc,CACd,eACF,CAEA,YACE,aAAc,CACd,iBAAkB,CAClB,aACF,CAEA,aACE,aAAc,CACd,iBACF,CAEA,kBACE,aAAc,CACd,wBAAyB,CACzB,kBAAmB,CACnB,cAAe,CACf,aACF","file":"main.8f090900.chunk.css","sourcesContent":["@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #6366f1;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #6366f1;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #111827;\n --solid-900: #d1dcec;\n --sidebar-bg: #2e3647;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.yellow {\n --main-500: #F59E0B;\n --main-400: #FBBF24;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: #FFF;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #111827;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.app.has-sidebar .main {\n padding-left: 160px;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-align-items: center;\n align-items: center;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n\n.app.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(194, 206, 219, 0.68);\n}\n.dark-mode.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(26, 32, 44, 0.8);\n}\n\n.block-category {\n margin-bottom: 10px;\n color: #4a5568;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow);\n overflow: hidden;\n color: #6366f1;\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: #6366f1;\n background-color: var(--main-500);\n box-shadow: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 0 16px 0 176px;\n}\n\n.toolbar {\n background-color: #6366f1;\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n.switcher {\n display: -webkit-flex;\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n -webkit-align-items: center;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n font-weight: 600;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n position: relative;\n}\n\n.opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: #6366f1;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { -webkit-transform: translateX(-24px); transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n -webkit-transform: translateX(26px);\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid #CBD5E0;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.toolbar>:nth-child(2) {\n margin-left: auto;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n padding: 0 12px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n border-radius: 20px;\n margin-right: 14px;\n display: -webkit-flex;\n display: flex;\n font-weight: 600;\n -webkit-align-items: center;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n -webkit-justify-content: center;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-to-clipboard {\n white-space: nowrap;\n width: auto;\n}\n\n.copy-the-block > svg {\n width: 16px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.copy-to-clipboard > svg {\n width: 13px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n -webkit-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n -webkit-transform: none;\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-feature-settings: \"calt\" off;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n\n.github {\n padding: 8px 12px;\n border-radius: 50px;\n position: fixed;\n right: 20px;\n bottom: 20px;\n background-color: #4a5568;\n background-color: var(--solid-900);\n color: #fff;\n display: -webkit-inline-flex;\n display: inline-flex;\n font-weight: 600;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n.github svg {\n width: 24px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.dark-mode .github {\n color: #1a202c;\n background-color: #fff;\n}\n\n.clipboard-wrapper {\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: row-reverse;\n flex-direction: row-reverse;\n -webkit-align-items: center;\n align-items: center;\n position: relative;\n}\n\n.clipboard-tooltip {\n color: #68717d;\n font-size: 13px;\n background-color: #fff;\n padding: 2px 5px;\n letter-spacing: .2px;\n border-radius: 4px;\n position: absolute;\n right: 100%;\n opacity: 0;\n transition: opacity .4s, margin-right .4s;\n}\n\n.clipboard-tooltip.is-copied {\n margin-right: 6px;\n opacity: 1;\n}\n\n@media (max-width: 1060px) {\n .device {\n display: none;\n }\n\n .switcher {\n margin-right: 0;\n }\n}\n\n.keyboard-nav {\n position: fixed;\n right: 158px;\n bottom: 18px;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-align-items: center;\n align-items: center;\n}\n\n.keyboard-nav-row {\n display: -webkit-flex;\n display: flex;\n}\n\n.keyboard-button {\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 4px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin: 1px;\n opacity: 0.5;\n background-color: #E2E8F0;\n background-color: var(--base-300);\n color: #4a5568;\n color: var(--solid-900);\n padding: 3px;\n position: relative;\n}\n\n.keyboard-nav:hover .keyboard-button:not(:hover) {\n opacity: .2;\n}\n\n.keyboard-button:hover {\n opacity: 1;\n}\n\n.keyboard-button:before {\n content: attr(data-info);\n position: absolute;\n color: #4a5568;\n color: var(--solid-900);\n pointer-events: none;\n font-size: 8px;\n text-transform: uppercase;\n transition: opacity .3s;\n text-align: center;\n white-space: nowrap;\n padding: 1px 4px;\n background-color: #E2E8F0;\n background-color: var(--base-200);\n border-radius: 4px;\n opacity: 0;\n pointer-events: none;\n z-index: -1;\n}\n\n.keyboard-button.is-active {\n -webkit-animation-name: keyboard;\n animation-name: keyboard;\n -webkit-animation-duration: .2s;\n animation-duration: .2s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n\n\n@-webkit-keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px #6366f1;\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n\n@keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px #6366f1;\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n z-index: 1;\n}\n\n.k-up:before {\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: 24px;\n}\n\n.k-down:before {\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: -18px;\n}\n\n.k-left:before {\n right: -70px;\n top: 4px;\n}\n\n.k-right:before {\n left: -76px;\n top: 4px;\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .copy-to-clipboard {\n display: none;\n }\n\n .keyboard-nav{\n display: none;\n }\n}\n\n@media (max-width: 760px) {\n .copy-the-block {\n display: none;\n }\n\n .opener {\n width: 40px;\n height: 100%;\n overflow: hidden;\n color: transparent;\n white-space: nowrap;\n }\n\n .opener::before {\n width: 24px;\n height: 24px;\n }\n\n .mode {\n margin-left: auto;\n }\n\n .sidebar {\n z-index: 2;\n }\n\n .switcher {\n position: fixed;\n bottom: 24px;\n z-index: 1;\n background-color: #fff;\n border: 1px solid #E2E8F0;\n border: 1px solid var(--base-200);\n right: 150px;\n }\n\n .dark-mode .switcher {\n background-color: #1a202c;\n }\n\n .app.has-sidebar .main {\n padding-left: 0;\n }\n}\n\n@media (max-width: 380px) {\n .github {\n width: 36px;\n height: 36px;\n overflow: hidden;\n border-radius: 50%;\n color: transparent;\n white-space: nowrap;\n }\n\n .github svg {\n position: absolute;\n top: 50%;\n left: 50%;\n color: #fff;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n }\n\n .dark-mode .github {\n color: transparent;\n }\n\n .dark-mode .github svg {\n color: #1a202c;\n }\n\n .switcher {\n right: 70px;\n }\n}\n\n#carbonads {\n display: block;\n overflow: hidden;\n padding: 1em;\n max-width: 130px;\n background: #ffffff;\n text-align: center;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n border-radius: 4px;\n border-radius: 6px;\n border: 1px solid #cfd9e3;\n margin-bottom: 15px;\n}\n\n#carbonads a {\n color: inherit;\n text-decoration: none;\n}\n\n#carbonads a:hover {\n color: inherit;\n}\n\n#carbonads span {\n display: block;\n overflow: hidden;\n}\n\n.carbon-img {\n display: block;\n margin: 0 auto 8px;\n line-height: 1;\n}\n\n.carbon-text {\n display: block;\n margin-bottom: 8px;\n}\n\n.carbon-poweredby {\n display: block;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-size: 10px;\n line-height: 1;\n}\n \n","@import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');\n\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #6366f1;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #6366f1;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #111827;\n --solid-900: #d1dcec;\n --sidebar-bg: #2e3647;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.yellow {\n --main-500: #F59E0B;\n --main-400: #FBBF24;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #111827;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.app.has-sidebar .main {\n padding-left: 160px;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: var(--sidebar-bg);\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: transform .3s;\n}\n\n.app.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(194, 206, 219, 0.68);\n}\n.dark-mode.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(26, 32, 44, 0.8);\n}\n\n.block-category {\n margin-bottom: 10px;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: var(--shadow);\n overflow: hidden;\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: var(--main-500);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 0 16px 0 176px;\n}\n\n.toolbar {\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: flex;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n transform: translateX(0);\n}\n\n.switcher {\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: flex;\n align-items: center;\n font-weight: 600;\n flex-shrink: 0;\n position: relative;\n}\n\n.opener::before {\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n flex-shrink: 0;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.toolbar>:nth-child(2) {\n margin-left: auto;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n padding: 0 12px;\n flex-shrink: 0;\n border-radius: 20px;\n margin-right: 14px;\n display: flex;\n font-weight: 600;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-to-clipboard {\n white-space: nowrap;\n width: auto;\n}\n\n.copy-the-block > svg {\n width: 16px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.copy-to-clipboard > svg {\n width: 13px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n\n.github {\n padding: 8px 12px;\n border-radius: 50px;\n position: fixed;\n right: 20px;\n bottom: 20px;\n background-color: var(--solid-900);\n color: #fff;\n display: inline-flex;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n}\n\n.github svg {\n width: 24px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.dark-mode .github {\n color: #1a202c;\n background-color: #fff;\n}\n\n.clipboard-wrapper {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n position: relative;\n}\n\n.clipboard-tooltip {\n color: #68717d;\n font-size: 13px;\n background-color: #fff;\n padding: 2px 5px;\n letter-spacing: .2px;\n border-radius: 4px;\n position: absolute;\n right: 100%;\n opacity: 0;\n transition: opacity .4s, margin-right .4s;\n}\n\n.clipboard-tooltip.is-copied {\n margin-right: 6px;\n opacity: 1;\n}\n\n@media (max-width: 1060px) {\n .device {\n display: none;\n }\n\n .switcher {\n margin-right: 0;\n }\n}\n\n.keyboard-nav {\n position: fixed;\n right: 158px;\n bottom: 18px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.keyboard-nav-row {\n display: flex;\n}\n\n.keyboard-button {\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 4px;\n flex-shrink: 0;\n margin: 1px;\n opacity: 0.5;\n background-color: var(--base-300);\n color: var(--solid-900);\n padding: 3px;\n position: relative;\n}\n\n.keyboard-nav:hover .keyboard-button:not(:hover) {\n opacity: .2;\n}\n\n.keyboard-button:hover {\n opacity: 1;\n}\n\n.keyboard-button:before {\n content: attr(data-info);\n position: absolute;\n color: var(--solid-900);\n pointer-events: none;\n font-size: 8px;\n text-transform: uppercase;\n transition: opacity .3s;\n text-align: center;\n white-space: nowrap;\n padding: 1px 4px;\n background-color: var(--base-200);\n border-radius: 4px;\n opacity: 0;\n pointer-events: none;\n z-index: -1;\n}\n\n.keyboard-button.is-active {\n animation-name: keyboard;\n animation-duration: .2s;\n animation-fill-mode: forwards;\n}\n\n\n@keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n z-index: 1;\n}\n\n.k-up:before {\n left: 50%;\n transform: translateX(-50%);\n top: 24px;\n}\n\n.k-down:before {\n left: 50%;\n transform: translateX(-50%);\n top: -18px;\n}\n\n.k-left:before {\n right: -70px;\n top: 4px;\n}\n\n.k-right:before {\n left: -76px;\n top: 4px;\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .copy-to-clipboard {\n display: none;\n }\n\n .keyboard-nav{\n display: none;\n }\n}\n\n@media (max-width: 760px) {\n .copy-the-block {\n display: none;\n }\n\n .opener {\n width: 40px;\n height: 100%;\n overflow: hidden;\n color: transparent;\n white-space: nowrap;\n }\n\n .opener::before {\n width: 24px;\n height: 24px;\n }\n\n .mode {\n margin-left: auto;\n }\n\n .sidebar {\n z-index: 2;\n }\n\n .switcher {\n position: fixed;\n bottom: 24px;\n z-index: 1;\n background-color: #fff;\n border: 1px solid var(--base-200);\n right: 150px;\n }\n\n .dark-mode .switcher {\n background-color: #1a202c;\n }\n\n .app.has-sidebar .main {\n padding-left: 0;\n }\n}\n\n@media (max-width: 380px) {\n .github {\n width: 36px;\n height: 36px;\n overflow: hidden;\n border-radius: 50%;\n color: transparent;\n white-space: nowrap;\n }\n\n .github svg {\n position: absolute;\n top: 50%;\n left: 50%;\n color: #fff;\n transform: translate(-50%, -50%);\n }\n\n .dark-mode .github {\n color: transparent;\n }\n\n .dark-mode .github svg {\n color: #1a202c;\n }\n\n .switcher {\n right: 70px;\n }\n}\n\n#carbonads {\n display: block;\n overflow: hidden;\n padding: 1em;\n max-width: 130px;\n background: #ffffff;\n text-align: center;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n border-radius: 4px;\n border-radius: 6px;\n border: 1px solid #cfd9e3;\n margin-bottom: 15px;\n}\n\n#carbonads a {\n color: inherit;\n text-decoration: none;\n}\n\n#carbonads a:hover {\n color: inherit;\n}\n\n#carbonads span {\n display: block;\n overflow: hidden;\n}\n\n.carbon-img {\n display: block;\n margin: 0 auto 8px;\n line-height: 1;\n}\n\n.carbon-text {\n display: block;\n margin-bottom: 8px;\n}\n\n.carbon-poweredby {\n display: block;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-size: 10px;\n line-height: 1;\n}\n "]} \ No newline at end of file diff --git a/static/css/main.8f090900.chunk.css b/static/css/main.e3b2134c.chunk.css similarity index 97% rename from static/css/main.8f090900.chunk.css rename to static/css/main.e3b2134c.chunk.css index 071c119..4f14c3e 100644 --- a/static/css/main.8f090900.chunk.css +++ b/static/css/main.e3b2134c.chunk.css @@ -1,2 +1,2 @@ -@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);:root{--base-500:#a0aec0;--base-200:#e2e8f0;--base-300:#e2e8f0;--base-400:#cbd5e0;--main-400:#7f9cf5;--main-200:#c3dafe;--main-100:#ebf4ff;--solid:#fff;--solid-900:#4a5568;--sidebar-bg:#edf2f7;--sidebar-color:#4a5568;--shadow:0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--opener:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");--opener-active:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E")}.dark-mode,:root{--main-500:#6366f1}.dark-mode{--base-500:#718096;--base-200:#2d3748;--base-300:#4a5568;--base-400:#4a5568;--main-200:#4a5568;--main-100:#2d3648;--solid:#111827;--solid-900:#d1dcec;--sidebar-bg:#2e3647;--sidebar-color:#fff;--shadow:0 10px 15px -3px #1a202d,0 4px 6px -2px #303a54;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(0,0,0,0.35),0 4px 6px -2px #4c525a}.red:not(.dark-mode){--main-200:#fed7d7;--main-100:#fed7d7}.red{--main-500:#f56565;--main-400:#fc8181}.orange{--main-500:#ed8936;--main-400:#f6ad55}.orange:not(.dark-mode){--main-200:#feebc8;--main-100:#fffaf0}.green{--main-500:#48bb78;--main-400:#68d391}.green:not(.dark-mode){--main-200:#c6f6d5;--main-100:#c6f6d5}.yellow{--main-500:#f59e0b;--main-400:#fbbf24}.blue{--main-500:#4299e1;--main-400:#63b3ed}.blue:not(.dark-mode){--main-200:#bee3f8;--main-100:#ebf8ff}.purple{--main-500:#9f7aea;--main-400:#b794f4}.purple:not(.dark-mode){--main-200:#e9d8fd;--main-100:#faf5ff}.pink{--main-500:#ed64a6;--main-400:#f687b3}.pink:not(.dark-mode){--main-200:#fed7e2;--main-100:#fff5f7}button{-webkit-user-select:none;-ms-user-select:none;user-select:none}button,button:focus{outline:0}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}iframe{width:100%;height:100%;border:0;background-color:#fff;background-color:var(--solid)}.app{height:100vh}.app.dark-mode{background-color:#111827}.main{height:calc(100vh - 64px);overflow:auto;transition:.3s}::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{display:none}.app.has-sidebar .main{padding-left:160px}.sidebar{height:100vh;width:160px;z-index:1;position:fixed;overflow:auto;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);padding:20px;top:0;background-color:#edf2f7;background-color:var(--sidebar-bg);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.app.has-sidebar .sidebar{box-shadow:2px 68px 10px rgba(194,206,219,.68)}.dark-mode.has-sidebar .sidebar{box-shadow:2px 68px 10px rgba(26,32,44,.8)}.block-category{color:#4a5568;color:var(--sidebar-color);font-size:13px;text-transform:uppercase;font-weight:600;margin-bottom:10px}.block-item{padding:0;border:0;border-radius:4px;box-shadow:0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow);overflow:hidden;color:#6366f1;color:var(--main-500)}.block-item.is-active{background-color:#6366f1;background-color:var(--main-500);box-shadow:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow-active)}.block-item.is-active>svg{opacity:.8}.block-item+.block-item{margin-top:20px}.blocks+.blocks{margin-top:30px}svg{width:100%}.app.has-sidebar .toolbar{padding:0 16px 0 176px}.toolbar{background-color:#6366f1;background-color:var(--main-500);transition:padding .3s;padding:0 16px;height:64px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.app.has-sidebar .sidebar{-webkit-transform:translateX(0);transform:translateX(0)}.switcher{display:-webkit-flex;display:flex;padding:0 10px;height:32px;border-radius:20px;background-color:#fff;-webkit-align-items:center;align-items:center;margin-right:16px}.theme-button{width:20px;height:20px;border-radius:50%}.theme-button.is-active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:10px;content:"";background-repeat:no-repeat;background-size:14px;background-position:50%}.theme-button+.theme-button{margin-left:5px}.opener{color:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-weight:600;position:relative}.opener,.opener:before{-webkit-flex-shrink:0;flex-shrink:0}.opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");background-image:var(--opener);display:inline-block;width:18px;height:18px;content:"";background-size:cover;background-repeat:no-repeat;margin-right:4px}.app.has-sidebar .opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E");background-image:var(--opener-active)}.mode{background-color:hsla(0,0%,100%,.192);border-radius:30px;width:58px;position:relative;height:32px;-webkit-flex-shrink:0;flex-shrink:0;margin-left:16px}.mode:before{width:32px;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2.4' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");background-size:cover;left:0;top:0;background-repeat:no-repeat;background-size:50%;transition:.3s;background-position:50%}.mode:after,.mode:before{content:"";position:absolute}.mode:after{width:20px;height:20px;right:6px;top:6px;background-color:#6366f1;background-color:var(--main-500);border-radius:50%;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.app.dark-mode .mode{background-color:rgba(0,0,0,.171)}.app.dark-mode .mode:after{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.app.dark-mode .mode:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");-webkit-transform:translateX(26px);transform:translateX(26px)}.device{color:#fff;opacity:.3;transition:.3s}.device.is-active{opacity:1}.device+.device{margin-left:8px}.view{position:relative}.app.desktop .view{height:100%}.device>svg{width:24px}.app.phone .view iframe{height:736px;width:414px;margin:60px auto 0;border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.phone .view{width:450px;height:880px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px;border:2px solid #e2e8f0;border:2px solid var(--base-300);margin:60px auto}.app.phone:not(.dark-mode) .view:after,.app.phone:not(.dark-mode) .view:before{opacity:.6}.app.phone .view:before{bottom:20px;border:2px solid #cbd5e0;border:2px solid var(--base-400);width:40px;border-radius:50%;height:40px}.app.phone .view:after,.app.phone .view:before{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:""}.app.phone .view:after{top:23px;width:100px;height:16px;border-radius:40px;border:2px solid #cbd5e0;border:2px solid var(--base-400)}.app.tablet .view{margin:60px auto;width:868px;height:1164px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px}.app.tablet .view,.app.tablet .view iframe{border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.tablet .view iframe{height:1024px;width:768px;margin:50px auto 0}.app.tablet .view:before{position:absolute;left:50%;bottom:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:2px solid #cbd5e0;border:2px solid var(--base-400);content:"";width:50px;border-radius:50%;height:50px}.markup{display:none}.toolbar>:nth-child(2){margin-left:auto}.copy-the-block{border:1px solid hsla(0,0%,100%,.4);padding:0 12px;-webkit-flex-shrink:0;flex-shrink:0;border-radius:20px;margin-right:14px;display:-webkit-flex;display:flex;font-weight:600;-webkit-align-items:center;align-items:center;color:#fff;height:32px;overflow:hidden;position:relative;-webkit-justify-content:center;justify-content:center;width:130px;text-align:center;font-size:13px;transition:.3s}.copy-to-clipboard{white-space:nowrap;width:auto}.copy-the-block>svg{width:16px;-webkit-flex-shrink:0;flex-shrink:0;margin-right:6px}.copy-to-clipboard>svg{width:13px}.knyttneve{position:fixed;bottom:20px;right:20px;color:#fff;border-radius:20px;height:32px;width:210px;font-size:13px;text-align:center;overflow:hidden;font-weight:500}.knyttneve span{position:absolute;top:0;left:0;height:100%;width:100%;text-align:center;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;transition:.3s}.id{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.knyttneve:hover .id{-webkit-transform:none;transform:none}.follow svg{width:14px;margin-right:8px;height:14px}.knyttneve:hover .follow{-webkit-transform:translateY(100%);transform:translateY(100%)}.copy-textarea{position:absolute;right:-9999990px;top:-999999999px;opacity:0}.codes{float:right;display:none;width:100%;transition:.3s}.dark-mode .codes pre,.dark-mode .view.show-code{background-color:#1a202c!important}.codes pre,.view.show-code{background-color:#fff!important}.codes pre{padding:20px!important;font-size:13.6px;line-height:1.8}.react-syntax-highlighter-line-number{opacity:.2;pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:12px}code,pre{font-family:"Space Mono",monospace;font-feature-settings:"calt" off;font-variant-ligatures:no-contextual}.view.show-code iframe{display:none}.view.show-code .codes{display:block}.github{padding:8px 12px;border-radius:50px;position:fixed;right:20px;bottom:20px;background-color:#4a5568;background-color:var(--solid-900);color:#fff;display:-webkit-inline-flex;display:inline-flex;font-weight:600;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.github svg{width:24px;-webkit-flex-shrink:0;flex-shrink:0;margin-right:6px}.dark-mode .github{color:#1a202c;background-color:#fff}.clipboard-wrapper{display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:center;align-items:center;position:relative}.clipboard-tooltip{color:#68717d;font-size:13px;background-color:#fff;padding:2px 5px;letter-spacing:.2px;border-radius:4px;position:absolute;right:100%;opacity:0;transition:opacity .4s,margin-right .4s}.clipboard-tooltip.is-copied{margin-right:6px;opacity:1}@media (max-width:1060px){.device{display:none}.switcher{margin-right:0}}.keyboard-nav{position:fixed;right:158px;bottom:18px;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.keyboard-nav,.keyboard-nav-row{display:-webkit-flex;display:flex}.keyboard-button{width:20px;height:20px;opacity:1;border-radius:4px;-webkit-flex-shrink:0;flex-shrink:0;margin:1px;opacity:.5;background-color:#e2e8f0;background-color:var(--base-300);color:#4a5568;color:var(--solid-900);padding:3px;position:relative}.keyboard-nav:hover .keyboard-button:not(:hover){opacity:.2}.keyboard-button:hover{opacity:1}.keyboard-button:before{content:attr(data-info);position:absolute;color:#4a5568;color:var(--solid-900);font-size:8px;text-transform:uppercase;transition:opacity .3s;text-align:center;white-space:nowrap;padding:1px 4px;background-color:#e2e8f0;background-color:var(--base-200);border-radius:4px;opacity:0;pointer-events:none;z-index:-1}.keyboard-button.is-active{-webkit-animation-name:keyboard;animation-name:keyboard;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes keyboard{0%{box-shadow:0}50%{box-shadow:0 0 0 5px #6366f1;box-shadow:0 0 0 5px var(--main-500);z-index:1}}@keyframes keyboard{0%{box-shadow:0}50%{box-shadow:0 0 0 5px #6366f1;box-shadow:0 0 0 5px var(--main-500);z-index:1}}.keyboard-button:hover:before{z-index:1}.k-up:before{top:24px}.k-down:before,.k-up:before{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.k-down:before{top:-18px}.k-left:before{right:-70px;top:4px}.k-right:before{left:-76px;top:4px}.keyboard-button:hover:before{opacity:1}@media (max-width:960px){.copy-to-clipboard,.keyboard-nav{display:none}}@media (max-width:760px){.copy-the-block{display:none}.opener{width:40px;height:100%;overflow:hidden;color:transparent;white-space:nowrap}.opener:before{width:24px;height:24px}.mode{margin-left:auto}.sidebar{z-index:2}.switcher{position:fixed;bottom:24px;z-index:1;background-color:#fff;border:1px solid #e2e8f0;border:1px solid var(--base-200);right:150px}.dark-mode .switcher{background-color:#1a202c}.app.has-sidebar .main{padding-left:0}}@media (max-width:380px){.github{width:36px;height:36px;overflow:hidden;border-radius:50%;color:transparent;white-space:nowrap}.github svg{position:absolute;top:50%;left:50%;color:#fff;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.dark-mode .github{color:transparent}.dark-mode .github svg{color:#1a202c}.switcher{right:70px}}#carbonads{display:block;overflow:hidden;padding:1em;max-width:130px;background:#fff;text-align:center;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;border-radius:4px;border-radius:6px;border:1px solid #cfd9e3;margin-bottom:15px}#carbonads a{text-decoration:none}#carbonads a,#carbonads a:hover{color:inherit}#carbonads span{display:block;overflow:hidden}.carbon-img{display:block;margin:0 auto 8px;line-height:1}.carbon-text{display:block;margin-bottom:8px}.carbon-poweredby{display:block;text-transform:uppercase;letter-spacing:1px;font-size:10px;line-height:1} -/*# sourceMappingURL=main.8f090900.chunk.css.map */ \ No newline at end of file +@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);:root{--base-500:#a0aec0;--base-200:#e2e8f0;--base-300:#e2e8f0;--base-400:#cbd5e0;--main-400:#7f9cf5;--main-200:#c3dafe;--main-100:#ebf4ff;--solid:#fff;--solid-900:#4a5568;--sidebar-bg:#edf2f7;--sidebar-color:#4a5568;--shadow:0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,0.19),0 4px 6px -2px #d0dce8;--opener:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");--opener-active:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E")}.dark-mode,:root{--main-500:#6366f1}.dark-mode{--base-500:#718096;--base-200:#2d3748;--base-300:#4a5568;--base-400:#4a5568;--main-200:#4a5568;--main-100:#2d3648;--solid:#111827;--solid-900:#d1dcec;--sidebar-bg:#2e3647;--sidebar-color:#fff;--shadow:0 10px 15px -3px #1a202d,0 4px 6px -2px #303a54;--shadow-active:0 0 0 2px currentColor,0 10px 15px -3px rgba(0,0,0,0.35),0 4px 6px -2px #4c525a}.red:not(.dark-mode){--main-200:#fed7d7;--main-100:#fed7d7}.red{--main-500:#f56565;--main-400:#fc8181}.orange{--main-500:#ed8936;--main-400:#f6ad55}.orange:not(.dark-mode){--main-200:#feebc8;--main-100:#fffaf0}.green{--main-500:#48bb78;--main-400:#68d391}.green:not(.dark-mode){--main-200:#c6f6d5;--main-100:#c6f6d5}.yellow{--main-500:#f59e0b;--main-400:#fbbf24}.blue{--main-500:#4299e1;--main-400:#63b3ed}.blue:not(.dark-mode){--main-200:#bee3f8;--main-100:#ebf8ff}.purple{--main-500:#9f7aea;--main-400:#b794f4}.purple:not(.dark-mode){--main-200:#e9d8fd;--main-100:#faf5ff}.pink{--main-500:#ed64a6;--main-400:#f687b3}.pink:not(.dark-mode){--main-200:#fed7e2;--main-100:#fff5f7}button{-webkit-user-select:none;-ms-user-select:none;user-select:none}button,button:focus{outline:0}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}iframe{width:100%;height:100%;border:0;background-color:#fff;background-color:var(--solid)}.app{height:100vh}.app.dark-mode{background-color:#111827}.main{height:calc(100vh - 64px);overflow:auto;transition:.3s}::-webkit-scrollbar,::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{display:none}.app.has-sidebar .main{padding-left:160px}.sidebar{height:100vh;width:160px;z-index:1;position:fixed;overflow:auto;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);padding:20px;top:0;background-color:#edf2f7;background-color:var(--sidebar-bg);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.app.has-sidebar .sidebar{box-shadow:2px 68px 10px rgba(194,206,219,.68)}.dark-mode.has-sidebar .sidebar{box-shadow:2px 68px 10px rgba(26,32,44,.8)}.block-category{color:#4a5568;color:var(--sidebar-color);font-size:13px;text-transform:uppercase;font-weight:600;margin-bottom:10px}.block-item{padding:0;border:0;border-radius:4px;box-shadow:0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow);overflow:hidden;color:#6366f1;color:var(--main-500)}.block-item.is-active{background-color:#6366f1;background-color:var(--main-500);box-shadow:0 0 0 2px currentColor,0 10px 15px -3px rgba(36,69,101,.19),0 4px 6px -2px #d0dce8;box-shadow:var(--shadow-active)}.block-item.is-active>svg{opacity:.8}.block-item+.block-item{margin-top:20px}.blocks+.blocks{margin-top:30px}svg{width:100%}.app.has-sidebar .toolbar{padding:0 16px 0 176px}.toolbar{background-color:#6366f1;background-color:var(--main-500);transition:padding .3s;padding:0 16px;height:64px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.app.has-sidebar .sidebar{-webkit-transform:translateX(0);transform:translateX(0)}.switcher{display:-webkit-flex;display:flex;padding:0 10px;height:32px;border-radius:20px;background-color:#fff;-webkit-align-items:center;align-items:center;margin-right:16px}.theme-button{width:20px;height:20px;border-radius:50%}.theme-button.is-active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-size:10px;content:"";background-repeat:no-repeat;background-size:14px;background-position:50%}.theme-button+.theme-button{margin-left:5px}.opener{color:#fff;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-weight:600;position:relative}.opener,.opener:before{-webkit-flex-shrink:0;flex-shrink:0}.opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");background-image:var(--opener);display:inline-block;width:18px;height:18px;content:"";background-size:cover;background-repeat:no-repeat;margin-right:4px}.app.has-sidebar .opener:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7l-7-7 7-7'/%3E%3C/svg%3E");background-image:var(--opener-active)}.mode{background-color:hsla(0,0%,100%,.192);border-radius:30px;width:58px;position:relative;height:32px;-webkit-flex-shrink:0;flex-shrink:0;margin-left:16px}.mode:before{width:32px;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2.4' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");background-size:cover;left:0;top:0;background-repeat:no-repeat;background-size:50%;transition:.3s;background-position:50%}.mode:after,.mode:before{content:"";position:absolute}.mode:after{width:20px;height:20px;right:6px;top:6px;background-color:#6366f1;background-color:var(--main-500);border-radius:50%;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.app.dark-mode .mode{background-color:rgba(0,0,0,.171)}.app.dark-mode .mode:after{-webkit-transform:translateX(-24px);transform:translateX(-24px)}.app.dark-mode .mode:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='2' fill='%23fff' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");-webkit-transform:translateX(26px);transform:translateX(26px)}.device{color:#fff;opacity:.3;transition:.3s}.device.is-active{opacity:1}.device+.device{margin-left:8px}.view{position:relative}.app.desktop .view{height:100%}.device>svg{width:24px}.app.phone .view iframe{height:736px;width:414px;margin:60px auto 0;border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.phone .view{width:450px;height:880px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px;border:2px solid #e2e8f0;border:2px solid var(--base-300);margin:60px auto}.app.phone:not(.dark-mode) .view:after,.app.phone:not(.dark-mode) .view:before{opacity:.6}.app.phone .view:before{bottom:20px;border:2px solid #cbd5e0;border:2px solid var(--base-400);width:40px;border-radius:50%;height:40px}.app.phone .view:after,.app.phone .view:before{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:""}.app.phone .view:after{top:23px;width:100px;height:16px;border-radius:40px;border:2px solid #cbd5e0;border:2px solid var(--base-400)}.app.tablet .view{margin:60px auto;width:868px;height:1164px;background-color:#edf2f7;background-color:var(--sidebar-bg);border-radius:30px}.app.tablet .view,.app.tablet .view iframe{border:2px solid #e2e8f0;border:2px solid var(--base-300)}.app.tablet .view iframe{height:1024px;width:768px;margin:50px auto 0}.app.tablet .view:before{position:absolute;left:50%;bottom:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);border:2px solid #cbd5e0;border:2px solid var(--base-400);content:"";width:50px;border-radius:50%;height:50px}.markup{display:none}.toolbar>:nth-child(2){margin-left:auto}.copy-the-block{border:1px solid hsla(0,0%,100%,.4);padding:0 12px;-webkit-flex-shrink:0;flex-shrink:0;border-radius:20px;margin-right:14px;display:-webkit-flex;display:flex;font-weight:600;-webkit-align-items:center;align-items:center;color:#fff;height:32px;overflow:hidden;position:relative;-webkit-justify-content:center;justify-content:center;width:130px;text-align:center;font-size:13px;transition:.3s}.copy-to-clipboard{white-space:nowrap;width:auto}.copy-the-block>svg{width:16px;-webkit-flex-shrink:0;flex-shrink:0;margin-right:6px}.copy-to-clipboard>svg{width:13px}.knyttneve{position:fixed;bottom:20px;right:20px;color:#fff;border-radius:20px;height:32px;width:210px;font-size:13px;text-align:center;overflow:hidden;font-weight:500}.knyttneve span{position:absolute;top:0;left:0;height:100%;width:100%;text-align:center;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;transition:.3s}.id{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.knyttneve:hover .id{-webkit-transform:none;transform:none}.follow svg{width:14px;margin-right:8px;height:14px}.knyttneve:hover .follow{-webkit-transform:translateY(100%);transform:translateY(100%)}.copy-textarea{position:absolute;right:-9999990px;top:-999999999px;opacity:0}.codes{float:right;display:none;width:100%;transition:.3s}.dark-mode .codes pre,.dark-mode .view.show-code{background-color:#1a202c!important}.codes pre,.view.show-code{background-color:#fff!important}.codes pre{padding:20px!important;font-size:13.6px;line-height:1.8}.react-syntax-highlighter-line-number{opacity:.2;pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:12px}code,pre{font-family:"Space Mono",monospace;font-feature-settings:"calt" off;font-variant-ligatures:no-contextual}.view.show-code iframe{display:none}.view.show-code .codes{display:block}.github{padding:8px 12px;border-radius:50px;position:fixed;right:20px;bottom:20px;background-color:#4a5568;background-color:var(--solid-900);color:#fff;display:-webkit-inline-flex;display:inline-flex;font-weight:600;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.github svg{width:24px;-webkit-flex-shrink:0;flex-shrink:0;margin-right:6px}.dark-mode .github{color:#1a202c;background-color:#fff}.clipboard-wrapper{display:-webkit-flex;display:flex;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-align-items:center;align-items:center;position:relative}.clipboard-tooltip{color:#68717d;font-size:13px;background-color:#fff;padding:2px 5px;letter-spacing:.2px;border-radius:4px;position:absolute;right:100%;opacity:0;transition:opacity .4s,margin-right .4s}.clipboard-tooltip.is-copied{margin-right:6px;opacity:1}@media (max-width:1060px){.device{display:none}.switcher{margin-right:0}}.keyboard-nav{position:fixed;right:158px;bottom:18px;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.keyboard-nav,.keyboard-nav-row{display:-webkit-flex;display:flex}.keyboard-button{width:20px;height:20px;opacity:1;border-radius:4px;-webkit-flex-shrink:0;flex-shrink:0;margin:1px;opacity:.5;background-color:#e2e8f0;background-color:var(--base-300);color:#4a5568;color:var(--solid-900);padding:3px;position:relative}.keyboard-nav:hover .keyboard-button:not(:hover){opacity:.2}.keyboard-button:hover{opacity:1}.keyboard-button:before{content:attr(data-info);position:absolute;color:#4a5568;color:var(--solid-900);font-size:8px;text-transform:uppercase;transition:opacity .3s;text-align:center;white-space:nowrap;padding:1px 4px;background-color:#e2e8f0;background-color:var(--base-200);border-radius:4px;opacity:0;pointer-events:none;z-index:-1}.keyboard-button.is-active{-webkit-animation-name:keyboard;animation-name:keyboard;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes keyboard{0%{box-shadow:0}50%{box-shadow:0 0 0 5px #6366f1;box-shadow:0 0 0 5px var(--main-500);z-index:1}}@keyframes keyboard{0%{box-shadow:0}50%{box-shadow:0 0 0 5px #6366f1;box-shadow:0 0 0 5px var(--main-500);z-index:1}}.keyboard-button:hover:before{z-index:1}.k-up:before{top:24px}.k-down:before,.k-up:before{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.k-down:before{top:-18px}.k-left:before{right:-70px;top:4px}.k-right:before{left:-76px;top:4px}.keyboard-button:hover:before{opacity:1}@media (max-width:960px){.copy-to-clipboard,.keyboard-nav{display:none}}@media (max-width:760px){.copy-the-block{display:none}.opener{width:40px;height:100%;overflow:hidden;color:transparent;white-space:nowrap}.opener:before{width:24px;height:24px}.mode{margin-left:auto}.sidebar{z-index:2}.switcher{position:fixed;bottom:24px;z-index:1;background-color:#fff;border:1px solid #e2e8f0;border:1px solid var(--base-200);right:150px}.dark-mode .switcher{background-color:#1a202c}.app.has-sidebar .main{padding-left:0}}@media (max-width:380px){.github{width:36px;height:36px;overflow:hidden;border-radius:50%;color:transparent;white-space:nowrap}.github svg{position:absolute;top:50%;left:50%;color:#fff;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.dark-mode .github{color:transparent}.dark-mode .github svg{color:#1a202c}.switcher{right:70px}}#carbonads{display:block;overflow:hidden;padding:1em;max-width:130px;background:#fff;text-align:center;font-size:14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.5;border-radius:4px;border-radius:6px;border:1px solid #cfd9e3;margin-bottom:15px}#carbonads a{text-decoration:none}#carbonads a,#carbonads a:hover{color:inherit}#carbonads span{display:block;overflow:hidden}.carbon-img{display:block;margin:0 auto 8px;line-height:1}.carbon-text{display:block;margin-bottom:8px}.carbon-poweredby{display:block;text-transform:uppercase;letter-spacing:1px;font-size:10px;line-height:1}.sense{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}@media (min-width:1200px){.sense{-webkit-transform:scale(.6);transform:scale(.6);-webkit-transform-origin:top;transform-origin:top;margin-top:20px;margin-bottom:-100px}} +/*# sourceMappingURL=main.e3b2134c.chunk.css.map */ \ No newline at end of file diff --git a/static/css/main.e3b2134c.chunk.css.map b/static/css/main.e3b2134c.chunk.css.map new file mode 100644 index 0000000..6afbbc0 --- /dev/null +++ b/static/css/main.e3b2134c.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["main.e3b2134c.chunk.css","index.css"],"names":[],"mappings":"AAAA,4EAA4E,CCE5E,MACE,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CAEnB,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CACnB,YAAa,CACb,mBAAoB,CACpB,oBAAqB,CACrB,uBAAwB,CACxB,qEAAqF,CACrF,mGAAoH,CACpH,8PAAgP,CAChP,sRACF,CAEA,iBAdE,kBA4BF,CAdA,WACE,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CACnB,kBAAmB,CAEnB,kBAAmB,CACnB,kBAAmB,CACnB,eAAgB,CAChB,mBAAoB,CACpB,oBAAqB,CACrB,oBAAqB,CACrB,wDAA0E,CAC1E,+FACF,CAEA,qBACE,kBAAmB,CACnB,kBACF,CAEA,KACE,kBAAmB,CACnB,kBACF,CAEA,QACE,kBAAmB,CACnB,kBACF,CAEA,wBACE,kBAAmB,CACnB,kBACF,CAEA,OACE,kBAAmB,CACnB,kBACF,CAEA,uBACE,kBAAmB,CACnB,kBACF,CAEA,QACE,kBAAmB,CACnB,kBACF,CAEA,MACE,kBAAmB,CACnB,kBACF,CAEA,sBACE,kBAAmB,CACnB,kBACF,CAEA,QACE,kBAAmB,CACnB,kBACF,CAEA,wBACE,kBAAmB,CACnB,kBACF,CAEA,MACE,kBAAmB,CACnB,kBACF,CAEA,sBACE,kBAAmB,CACnB,kBACF,CAEA,OACE,wBAAiB,CAAjB,oBAAiB,CAAjB,gBACF,CAEA,oBACE,SACF,CAEA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCAAkC,CAClC,eACF,CAEA,OACE,UAAW,CACX,WAAY,CACZ,QAAS,CACT,qBAA8B,CAA9B,6BACF,CAEA,KACE,YACF,CAEA,eACE,wBACF,CAEA,MACE,yBAA0B,CAC1B,aAAc,CACd,cACF,CAEA,wEAGE,YACF,CAEA,uBACE,kBACF,CAEA,SACE,YAAa,CACb,WAAY,CACZ,SAAU,CACV,cAAe,CACf,aAAc,CACd,MAAO,CACP,mCAA4B,CAA5B,2BAA4B,CAC5B,YAAa,CACb,KAAM,CACN,wBAAmC,CAAnC,kCAAmC,CACnC,oBAAa,CAAb,YAAa,CACb,6BAAsB,CAAtB,qBAAsB,CACtB,0BAAmB,CAAnB,kBAAmB,CACnB,gCAAyB,CAAzB,wBAAyB,CAAzB,8CACF,CAEA,0BACE,8CACF,CACA,gCACE,0CACF,CAEA,gBAEE,aAA2B,CAA3B,0BAA2B,CAC3B,cAAe,CACf,wBAAyB,CACzB,eAAgB,CAChB,kBACF,CAEA,YACE,SAAU,CACV,QAAS,CACT,iBAAkB,CAClB,sEAAyB,CAAzB,wBAAyB,CACzB,eAAgB,CAChB,aAAsB,CAAtB,qBACF,CAEA,sBACE,wBAAiC,CAAjC,gCAAiC,CACjC,6FAAgC,CAAhC,+BACF,CAEA,0BACE,UACF,CAEA,wBAA4B,eAAkB,CAC9C,gBAAoB,eAAkB,CACtC,IAAM,UAAa,CAEnB,0BACE,sBACF,CAEA,SACE,wBAAiC,CAAjC,gCAAiC,CACjC,sBAAuB,CACvB,cAAe,CACf,WAAY,CACZ,oBAAa,CAAb,YAAa,CACb,0BAAmB,CAAnB,kBACF,CAEA,0BACE,+BAAwB,CAAxB,uBACF,CAEA,UACE,oBAAa,CAAb,YAAa,CACb,cAAe,CACf,WAAY,CACZ,kBAAmB,CACnB,qBAAsB,CACtB,0BAAmB,CAAnB,kBAAmB,CACnB,iBACF,CAEA,cACE,UAAW,CACX,WAAY,CACZ,iBACF,CAEA,wBACE,iRAAmQ,CAAG,oBAAqB,CAC3R,UAAW,CACX,2BAA4B,CAC5B,oBAAqB,CACrB,uBACF,CAEA,4BACE,eACF,CAEA,QACE,UAAW,CACX,oBAAa,CAAb,YAAa,CACb,0BAAmB,CAAnB,kBAAmB,CACnB,eAAgB,CAEhB,iBACF,CAEA,uBAJE,qBAAc,CAAd,aAcF,CAVA,eACE,sQAA+B,CAA/B,8BAA+B,CAC/B,oBAAqB,CACrB,UAAW,CAEX,WAAY,CACZ,UAAW,CACX,qBAAsB,CACtB,2BAA4B,CAC5B,gBACF,CAEA,gCACE,uRAAsC,CAAtC,qCACF,CAEA,MACE,qCAA4C,CAC5C,kBAAmB,CACnB,UAAW,CACX,iBAAkB,CAClB,WAAY,CACZ,qBAAc,CAAd,aAAc,CACd,gBACF,CAEA,aACE,UAAW,CACX,WAAY,CAEZ,yZAA4Y,CAAG,qBAAsB,CACra,MAAO,CAEP,KAAM,CACN,2BAA4B,CAC5B,mBAAoB,CACpB,cAAe,CACf,uBACF,CAEA,yBAXE,UAAW,CAGX,iBAkBF,CAVA,YACE,UAAW,CACX,WAAY,CAEZ,SAAU,CACV,OAAQ,CACR,wBAAiC,CAAjC,gCAAiC,CAEjC,iBAAkB,CAClB,gCAAyB,CAAzB,wBAAyB,CAAzB,8CACF,CAEA,qBAAuB,iCAAwC,CAC/D,2BAA8B,mCAA4B,CAA5B,2BAA8B,CAC5D,4BACE,+SAAgS,CAChS,kCAA2B,CAA3B,0BACF,CAEA,QACE,UAAW,CACX,UAAY,CACZ,cACF,CAEA,kBACE,SACF,CAEA,gBACE,eACF,CAEA,MACE,iBACF,CAEA,mBACE,WACF,CAEA,YACE,UACF,CAEA,wBACE,YAAa,CACb,WAAY,CACZ,kBAAmB,CACnB,wBAAiC,CAAjC,gCACF,CAEA,iBACE,WAAY,CACZ,YAAa,CACb,wBAAmC,CAAnC,kCAAmC,CACnC,kBAAmB,CACnB,wBAAiC,CAAjC,gCAAiC,CACjC,gBACF,CAEA,+EAEE,UACF,CAEA,wBAGE,WAAY,CAEZ,wBAAiC,CAAjC,gCAAiC,CAEjC,UAAW,CACX,iBAAkB,CAClB,WACF,CAEA,+CAXE,iBAAkB,CAClB,QAAS,CAET,kCAA2B,CAA3B,0BAA2B,CAE3B,UAgBF,CAVA,uBAKE,QAAS,CACT,WAAY,CACZ,WAAY,CACZ,kBAAmB,CACnB,wBAAiC,CAAjC,gCACF,CAEA,kBACE,gBAAiB,CACjB,WAAY,CACZ,aAAc,CACd,wBAAmC,CAAnC,kCAAmC,CACnC,kBAEF,CAEA,2CAHE,wBAAiC,CAAjC,gCAQF,CALA,yBACE,aAAc,CACd,WAAY,CACZ,kBAEF,CAEA,yBACE,iBAAkB,CAClB,QAAS,CACT,WAAY,CACZ,kCAA2B,CAA3B,0BAA2B,CAC3B,wBAAiC,CAAjC,gCAAiC,CACjC,UAAW,CACX,UAAW,CACX,iBAAkB,CAClB,WACF,CAEA,QACE,YACF,CAEA,uBACE,gBACF,CAEA,gBACE,mCAA0C,CAC1C,cAAe,CACf,qBAAc,CAAd,aAAc,CACd,kBAAmB,CACnB,iBAAkB,CAClB,oBAAa,CAAb,YAAa,CACb,eAAgB,CAChB,0BAAmB,CAAnB,kBAAmB,CACnB,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,iBAAkB,CAClB,8BAAuB,CAAvB,sBAAuB,CACvB,WAAY,CACZ,iBAAkB,CAClB,cAAe,CACf,cACF,CAEA,mBACE,kBAAmB,CACnB,UACF,CAEA,oBACE,UAAW,CACX,qBAAc,CAAd,aAAc,CACd,gBACF,CAEA,uBACE,UACF,CAEA,WACE,cAAe,CACf,WAAY,CACZ,UAAW,CACX,UAAW,CACX,kBAAmB,CACnB,WAAY,CACZ,WAAY,CACZ,cAAe,CACf,iBAAkB,CAClB,eAAgB,CAChB,eACF,CAEA,gBACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,WAAY,CACZ,UAAW,CACX,iBAAkB,CAClB,oBAAa,CAAb,YAAa,CACb,0BAAmB,CAAnB,kBAAmB,CACnB,8BAAuB,CAAvB,sBAAuB,CACvB,cACF,CAEA,IACE,mCAA4B,CAA5B,2BACF,CAEA,qBACE,sBAAe,CAAf,cACF,CAEA,YACE,UAAW,CACX,gBAAiB,CACjB,WACF,CAEA,yBACE,kCAA2B,CAA3B,0BACF,CAEA,eACE,iBAAkB,CAClB,gBAAiB,CACjB,gBAAiB,CACjB,SACF,CAEA,OACE,WAAY,CACZ,YAAa,CACb,UAAW,CACX,cACF,CAEA,iDACE,kCACF,CAEA,2BACE,+BACF,CAEA,WACE,sBAAwB,CACxB,gBAAiB,CACjB,eACF,CAEA,sCACE,UAAY,CACZ,mBAAoB,CACpB,wBAAiB,CAAjB,oBAAiB,CAAjB,gBAAiB,CACjB,cACF,CAEA,SACE,kCAAmC,CACnC,gCAAqC,CAArC,oCACF,CAEA,uBACE,YACF,CAEA,uBACE,aACF,CAEA,QACE,gBAAiB,CACjB,kBAAmB,CACnB,cAAe,CACf,UAAW,CACX,WAAY,CACZ,wBAAkC,CAAlC,iCAAkC,CAClC,UAAW,CACX,2BAAoB,CAApB,mBAAoB,CACpB,eAAgB,CAChB,0BAAmB,CAAnB,kBAAmB,CACnB,8BAAuB,CAAvB,sBACF,CAEA,YACE,UAAW,CACX,qBAAc,CAAd,aAAc,CACd,gBACF,CAEA,mBACE,aAAc,CACd,qBACF,CAEA,mBACE,oBAAa,CAAb,YAAa,CACb,kCAA2B,CAA3B,0BAA2B,CAC3B,0BAAmB,CAAnB,kBAAmB,CACnB,iBACF,CAEA,mBACE,aAAc,CACd,cAAe,CACf,qBAAsB,CACtB,eAAgB,CAChB,mBAAoB,CACpB,iBAAkB,CAClB,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,uCACF,CAEA,6BACE,gBAAiB,CACjB,SACF,CAEA,0BACE,QACE,YACF,CAEA,UACE,cACF,CACF,CAEA,cACE,cAAe,CACf,WAAY,CACZ,WAAY,CAEZ,6BAAsB,CAAtB,qBAAsB,CACtB,0BAAmB,CAAnB,kBACF,CAEA,gCALE,oBAAa,CAAb,YAOF,CAEA,iBACE,UAAW,CACX,WAAY,CACZ,SAAU,CACV,iBAAkB,CAClB,qBAAc,CAAd,aAAc,CACd,UAAW,CACX,UAAY,CACZ,wBAAiC,CAAjC,gCAAiC,CACjC,aAAuB,CAAvB,sBAAuB,CACvB,WAAY,CACZ,iBACF,CAEA,iDACE,UACF,CAEA,uBACE,SACF,CAEA,wBACE,uBAAwB,CACxB,iBAAkB,CAClB,aAAuB,CAAvB,sBAAuB,CAEvB,aAAc,CACd,wBAAyB,CACzB,sBAAuB,CACvB,iBAAkB,CAClB,kBAAmB,CACnB,eAAgB,CAChB,wBAAiC,CAAjC,gCAAiC,CACjC,iBAAkB,CAClB,SAAU,CACV,mBAAoB,CACpB,UACF,CAEA,2BACE,+BAAwB,CAAxB,uBAAwB,CACxB,8BAAuB,CAAvB,sBAAuB,CACvB,oCAA6B,CAA7B,4BACF,CAGA,4BACE,GACE,YACF,CACA,IACE,4BAAqC,CAArC,oCAAqC,CACrC,SACF,CACF,CARA,oBACE,GACE,YACF,CACA,IACE,4BAAqC,CAArC,oCAAqC,CACrC,SACF,CACF,CAEA,8BAEE,SACF,CAEA,aAGE,QACF,CAEA,4BALE,QAAS,CACT,kCAA2B,CAA3B,0BAQF,CAJA,eAGE,SACF,CAEA,eACE,WAAY,CACZ,OACF,CAEA,gBACE,UAAW,CACX,OACF,CAEA,8BACE,SACF,CAEA,yBAKE,iCACE,YACF,CACF,CAEA,yBACE,gBACE,YACF,CAEA,QACE,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,iBAAkB,CAClB,kBACF,CAEA,eACE,UAAW,CACX,WACF,CAEA,MACE,gBACF,CAEA,SACE,SACF,CAEA,UACE,cAAe,CACf,WAAY,CACZ,SAAU,CACV,qBAAsB,CACtB,wBAAiC,CAAjC,gCAAiC,CACjC,WACF,CAEA,qBACE,wBACF,CAEA,uBACE,cACF,CACF,CAEA,yBACE,QACE,UAAW,CACX,WAAY,CACZ,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,kBACF,CAEA,YACE,iBAAkB,CAClB,OAAQ,CACR,QAAS,CACT,UAAW,CACX,sCAAgC,CAAhC,8BACF,CAEA,mBACE,iBACF,CAEA,uBACE,aACF,CAEA,UACE,UACF,CACF,CAEA,WACE,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,eAAgB,CAChB,eAAmB,CACnB,iBAAkB,CAClB,cAAe,CACf,uHAAgI,CAChI,eAAgB,CAChB,iBAAkB,CAClB,iBAAkB,CAClB,wBAAyB,CACzB,kBACF,CAEA,aAEE,oBACF,CAEA,gCAJE,aAMF,CAEA,gBACE,aAAc,CACd,eACF,CAEA,YACE,aAAc,CACd,iBAAkB,CAClB,aACF,CAEA,aACE,aAAc,CACd,iBACF,CAEA,kBACE,aAAc,CACd,wBAAyB,CACzB,kBAAmB,CACnB,cAAe,CACf,aACF,CAEA,OACE,oBAAa,CAAb,YAAa,CACb,0BAAmB,CAAnB,kBAAmB,CACnB,8BAAuB,CAAvB,sBACF,CAEA,0BACE,OACE,2BAAoB,CAApB,mBAAoB,CACpB,4BAAqB,CAArB,oBAAqB,CACrB,eAAgB,CAChB,oBACF,CACF","file":"main.e3b2134c.chunk.css","sourcesContent":["@import url(https://fonts.googleapis.com/css?family=Space+Mono&display=swap);\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #6366f1;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #6366f1;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #111827;\n --solid-900: #d1dcec;\n --sidebar-bg: #2e3647;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.yellow {\n --main-500: #F59E0B;\n --main-400: #FBBF24;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: #FFF;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #111827;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.app.has-sidebar .main {\n padding-left: 160px;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n -webkit-transform: translateX(-100%);\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-align-items: center;\n align-items: center;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n\n.app.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(194, 206, 219, 0.68);\n}\n.dark-mode.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(26, 32, 44, 0.8);\n}\n\n.block-category {\n margin-bottom: 10px;\n color: #4a5568;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow);\n overflow: hidden;\n color: #6366f1;\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: #6366f1;\n background-color: var(--main-500);\n box-shadow: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 0 16px 0 176px;\n}\n\n.toolbar {\n background-color: #6366f1;\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n}\n\n.switcher {\n display: -webkit-flex;\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n -webkit-align-items: center;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n font-weight: 600;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n position: relative;\n}\n\n.opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: #6366f1;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { -webkit-transform: translateX(-24px); transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n -webkit-transform: translateX(26px);\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid #CBD5E0;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: #edf2f7;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid #E2E8F0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n border: 2px solid #CBD5E0;\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.toolbar>:nth-child(2) {\n margin-left: auto;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n padding: 0 12px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n border-radius: 20px;\n margin-right: 14px;\n display: -webkit-flex;\n display: flex;\n font-weight: 600;\n -webkit-align-items: center;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n -webkit-justify-content: center;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-to-clipboard {\n white-space: nowrap;\n width: auto;\n}\n\n.copy-the-block > svg {\n width: 16px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.copy-to-clipboard > svg {\n width: 13px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n -webkit-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n -webkit-transform: none;\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n -webkit-transform: translateY(100%);\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-feature-settings: \"calt\" off;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n\n.github {\n padding: 8px 12px;\n border-radius: 50px;\n position: fixed;\n right: 20px;\n bottom: 20px;\n background-color: #4a5568;\n background-color: var(--solid-900);\n color: #fff;\n display: -webkit-inline-flex;\n display: inline-flex;\n font-weight: 600;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n.github svg {\n width: 24px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.dark-mode .github {\n color: #1a202c;\n background-color: #fff;\n}\n\n.clipboard-wrapper {\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: row-reverse;\n flex-direction: row-reverse;\n -webkit-align-items: center;\n align-items: center;\n position: relative;\n}\n\n.clipboard-tooltip {\n color: #68717d;\n font-size: 13px;\n background-color: #fff;\n padding: 2px 5px;\n letter-spacing: .2px;\n border-radius: 4px;\n position: absolute;\n right: 100%;\n opacity: 0;\n transition: opacity .4s, margin-right .4s;\n}\n\n.clipboard-tooltip.is-copied {\n margin-right: 6px;\n opacity: 1;\n}\n\n@media (max-width: 1060px) {\n .device {\n display: none;\n }\n\n .switcher {\n margin-right: 0;\n }\n}\n\n.keyboard-nav {\n position: fixed;\n right: 158px;\n bottom: 18px;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-align-items: center;\n align-items: center;\n}\n\n.keyboard-nav-row {\n display: -webkit-flex;\n display: flex;\n}\n\n.keyboard-button {\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 4px;\n -webkit-flex-shrink: 0;\n flex-shrink: 0;\n margin: 1px;\n opacity: 0.5;\n background-color: #E2E8F0;\n background-color: var(--base-300);\n color: #4a5568;\n color: var(--solid-900);\n padding: 3px;\n position: relative;\n}\n\n.keyboard-nav:hover .keyboard-button:not(:hover) {\n opacity: .2;\n}\n\n.keyboard-button:hover {\n opacity: 1;\n}\n\n.keyboard-button:before {\n content: attr(data-info);\n position: absolute;\n color: #4a5568;\n color: var(--solid-900);\n pointer-events: none;\n font-size: 8px;\n text-transform: uppercase;\n transition: opacity .3s;\n text-align: center;\n white-space: nowrap;\n padding: 1px 4px;\n background-color: #E2E8F0;\n background-color: var(--base-200);\n border-radius: 4px;\n opacity: 0;\n pointer-events: none;\n z-index: -1;\n}\n\n.keyboard-button.is-active {\n -webkit-animation-name: keyboard;\n animation-name: keyboard;\n -webkit-animation-duration: .2s;\n animation-duration: .2s;\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n}\n\n\n@-webkit-keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px #6366f1;\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n\n@keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px #6366f1;\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n z-index: 1;\n}\n\n.k-up:before {\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: 24px;\n}\n\n.k-down:before {\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n top: -18px;\n}\n\n.k-left:before {\n right: -70px;\n top: 4px;\n}\n\n.k-right:before {\n left: -76px;\n top: 4px;\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .copy-to-clipboard {\n display: none;\n }\n\n .keyboard-nav{\n display: none;\n }\n}\n\n@media (max-width: 760px) {\n .copy-the-block {\n display: none;\n }\n\n .opener {\n width: 40px;\n height: 100%;\n overflow: hidden;\n color: transparent;\n white-space: nowrap;\n }\n\n .opener::before {\n width: 24px;\n height: 24px;\n }\n\n .mode {\n margin-left: auto;\n }\n\n .sidebar {\n z-index: 2;\n }\n\n .switcher {\n position: fixed;\n bottom: 24px;\n z-index: 1;\n background-color: #fff;\n border: 1px solid #E2E8F0;\n border: 1px solid var(--base-200);\n right: 150px;\n }\n\n .dark-mode .switcher {\n background-color: #1a202c;\n }\n\n .app.has-sidebar .main {\n padding-left: 0;\n }\n}\n\n@media (max-width: 380px) {\n .github {\n width: 36px;\n height: 36px;\n overflow: hidden;\n border-radius: 50%;\n color: transparent;\n white-space: nowrap;\n }\n\n .github svg {\n position: absolute;\n top: 50%;\n left: 50%;\n color: #fff;\n -webkit-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n }\n\n .dark-mode .github {\n color: transparent;\n }\n\n .dark-mode .github svg {\n color: #1a202c;\n }\n\n .switcher {\n right: 70px;\n }\n}\n\n#carbonads {\n display: block;\n overflow: hidden;\n padding: 1em;\n max-width: 130px;\n background: #ffffff;\n text-align: center;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n border-radius: 4px;\n border-radius: 6px;\n border: 1px solid #cfd9e3;\n margin-bottom: 15px;\n}\n\n#carbonads a {\n color: inherit;\n text-decoration: none;\n}\n\n#carbonads a:hover {\n color: inherit;\n}\n\n#carbonads span {\n display: block;\n overflow: hidden;\n}\n\n.carbon-img {\n display: block;\n margin: 0 auto 8px;\n line-height: 1;\n}\n\n.carbon-text {\n display: block;\n margin-bottom: 8px;\n}\n\n.carbon-poweredby {\n display: block;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-size: 10px;\n line-height: 1;\n}\n\n.sense {\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: center;\n justify-content: center;\n}\n\n@media (min-width: 1200px) {\n .sense {\n -webkit-transform: scale(.6);\n transform: scale(.6);\n -webkit-transform-origin: top;\n transform-origin: top;\n margin-top: 20px;\n margin-bottom: -100px;\n }\n}\n\n","@import url('https://fonts.googleapis.com/css?family=Space+Mono&display=swap');\n\n:root {\n --base-500: #A0AEC0;\n --base-200: #E2E8F0;\n --base-300: #E2E8F0;\n --base-400: #CBD5E0;\n --main-500: #6366f1;\n --main-400: #7F9CF5;\n --main-200: #c3dafe;\n --main-100: #EBF4FF;\n --solid: #FFF;\n --solid-900: #4a5568;\n --sidebar-bg: #edf2f7;\n --sidebar-color: #4a5568;\n --shadow: 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(36, 69, 101, 0.19), 0 4px 6px -2px rgb(208, 220, 232);\n --opener: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n --opener-active: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E\");\n}\n\n.dark-mode {\n --base-500: #718096;\n --base-200: #2d3748;\n --base-300: #4a5568;\n --base-400: #4a5568;\n --main-500: #6366f1;\n --main-200: #4a5568;\n --main-100: #2d3648;\n --solid: #111827;\n --solid-900: #d1dcec;\n --sidebar-bg: #2e3647;\n --sidebar-color: #fff;\n --shadow: 0 10px 15px -3px rgb(26, 32, 45), 0 4px 6px -2px rgb(48, 58, 84);\n --shadow-active: 0 0 0 2px currentColor, 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgb(76, 82, 90);\n}\n\n.red:not(.dark-mode) {\n --main-200: #fed7d7;\n --main-100: #fed7d7;\n}\n\n.red {\n --main-500: #f56565;\n --main-400: #fc8181;\n}\n\n.orange {\n --main-500: #ed8936;\n --main-400: #f6ad55;\n}\n\n.orange:not(.dark-mode) {\n --main-200: #feebc8;\n --main-100: #fffaf0;\n}\n\n.green {\n --main-500: #48bb78;\n --main-400: #68d391;\n}\n\n.green:not(.dark-mode) {\n --main-200: #c6f6d5;\n --main-100: #c6f6d5;\n}\n\n.yellow {\n --main-500: #F59E0B;\n --main-400: #FBBF24;\n}\n\n.blue {\n --main-500: #4299e1;\n --main-400: #63b3ed;\n}\n\n.blue:not(.dark-mode) {\n --main-200: #bee3f8;\n --main-100: #ebf8ff;\n}\n\n.purple {\n --main-500: #9f7aea;\n --main-400: #b794f4;\n}\n\n.purple:not(.dark-mode) {\n --main-200: #e9d8fd;\n --main-100: #faf5ff;\n}\n\n.pink {\n --main-500: #ed64a6;\n --main-400: #f687b3;\n}\n\n.pink:not(.dark-mode) {\n --main-200: #fed7e2;\n --main-100: #fff5f7;\n}\n\nbutton {\n user-select: none;\n}\n\nbutton, button:focus {\n outline: 0;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow: hidden;\n}\n\niframe {\n width: 100%;\n height: 100%;\n border: 0;\n background-color: var(--solid);\n}\n\n.app {\n height: 100vh;\n}\n\n.app.dark-mode {\n background-color: #111827;\n}\n\n.main {\n height: calc(100vh - 64px);\n overflow: auto;\n transition: .3s;\n}\n\n::-webkit-scrollbar-thumb,\n::-webkit-scrollbar-track,\n::-webkit-scrollbar {\n display: none;\n}\n\n.app.has-sidebar .main {\n padding-left: 160px;\n}\n\n.sidebar {\n height: 100vh;\n width: 160px;\n z-index: 1;\n position: fixed;\n overflow: auto;\n left: 0;\n transform: translateX(-100%);\n padding: 20px;\n top: 0;\n background-color: var(--sidebar-bg);\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: transform .3s;\n}\n\n.app.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(194, 206, 219, 0.68);\n}\n.dark-mode.has-sidebar .sidebar {\n box-shadow: 2px 68px 10px rgba(26, 32, 44, 0.8);\n}\n\n.block-category {\n margin-bottom: 10px;\n color: var(--sidebar-color);\n font-size: 13px;\n text-transform: uppercase;\n font-weight: 600;\n margin-bottom: 10px;\n}\n\n.block-item {\n padding: 0;\n border: 0;\n border-radius: 4px;\n box-shadow: var(--shadow);\n overflow: hidden;\n color: var(--main-500);\n}\n\n.block-item.is-active {\n background-color: var(--main-500);\n box-shadow: var(--shadow-active);\n}\n\n.block-item.is-active > svg {\n opacity: .8;\n}\n\n.block-item + .block-item { margin-top: 20px; }\n.blocks + .blocks { margin-top: 30px; }\nsvg { width: 100%; }\n\n.app.has-sidebar .toolbar {\n padding: 0 16px 0 176px;\n}\n\n.toolbar {\n background-color: var(--main-500);\n transition: padding .3s;\n padding: 0 16px;\n height: 64px;\n display: flex;\n align-items: center;\n}\n\n.app.has-sidebar .sidebar {\n transform: translateX(0);\n}\n\n.switcher {\n display: flex;\n padding: 0 10px;\n height: 32px;\n border-radius: 20px;\n background-color: #fff;\n align-items: center;\n margin-right: 16px;\n}\n\n.theme-button {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n}\n\n.theme-button.is-active {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\"); background-size: 10px;\n content: \"\";\n background-repeat: no-repeat;\n background-size: 14px;\n background-position: center;\n}\n\n.theme-button + .theme-button {\n margin-left: 5px;\n}\n\n.opener {\n color: #fff;\n display: flex;\n align-items: center;\n font-weight: 600;\n flex-shrink: 0;\n position: relative;\n}\n\n.opener::before {\n background-image: var(--opener);\n display: inline-block;\n width: 18px;\n flex-shrink: 0;\n height: 18px;\n content: \"\";\n background-size: cover;\n background-repeat: no-repeat;\n margin-right: 4px;\n}\n\n.app.has-sidebar .opener::before {\n background-image: var(--opener-active);\n}\n\n.mode {\n background-color: rgba(255, 255, 255, 0.192);\n border-radius: 30px;\n width: 58px;\n position: relative;\n height: 32px;\n flex-shrink: 0;\n margin-left: 16px;\n}\n\n.mode::before {\n width: 32px;\n height: 100%;\n content: \"\";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2.4' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E\"); background-size: cover;\n left: 0;\n position: absolute;\n top: 0;\n background-repeat: no-repeat;\n background-size: 50%;\n transition: .3s;\n background-position: center;\n}\n\n.mode::after {\n width: 20px;\n height: 20px;\n position: absolute;\n right: 6px;\n top: 6px;\n background-color: var(--main-500);\n content: \"\";\n border-radius: 50%;\n transition: transform .3s;\n}\n\n.app.dark-mode .mode { background-color: rgba(0, 0, 0, 0.171); }\n.app.dark-mode .mode::after { transform: translateX(-24px); }\n.app.dark-mode .mode::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='2' fill='white' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E\");\n transform: translateX(26px);\n}\n\n.device {\n color: #fff;\n opacity: 0.3;\n transition: .3s;\n}\n\n.device.is-active {\n opacity: 1;\n}\n\n.device + .device {\n margin-left: 8px;\n}\n\n.view {\n position: relative;\n}\n\n.app.desktop .view {\n height: 100%;\n}\n\n.device > svg {\n width: 24px;\n}\n\n.app.phone .view iframe {\n height: 736px;\n width: 414px;\n margin: 60px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.phone .view {\n width: 450px;\n height: 880px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n margin: 60px auto;\n}\n\n.app.phone:not(.dark-mode) .view::before,\n.app.phone:not(.dark-mode) .view::after {\n opacity: .6;\n}\n\n.app.phone .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 40px;\n border-radius: 50%;\n height: 40px;\n}\n\n.app.phone .view::after {\n content: \"\";\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 23px;\n width: 100px;\n height: 16px;\n border-radius: 40px;;\n border: 2px solid var(--base-400);\n}\n\n.app.tablet .view {\n margin: 60px auto;\n width: 868px;\n height: 1164px;\n background-color: var(--sidebar-bg);\n border-radius: 30px;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view iframe {\n height: 1024px;\n width: 768px;\n margin: 50px auto 0;\n border: 2px solid var(--base-300);\n}\n\n.app.tablet .view::before {\n position: absolute;\n left: 50%;\n bottom: 20px;\n transform: translateX(-50%);\n border: 2px solid var(--base-400);\n content: \"\";\n width: 50px;\n border-radius: 50%;\n height: 50px;\n}\n\n.markup {\n display: none;\n}\n\n.toolbar>:nth-child(2) {\n margin-left: auto;\n}\n\n.copy-the-block {\n border: 1px solid rgba(255, 255, 255, 0.4);\n padding: 0 12px;\n flex-shrink: 0;\n border-radius: 20px;\n margin-right: 14px;\n display: flex;\n font-weight: 600;\n align-items: center;\n color: #fff;\n height: 32px;\n overflow: hidden;\n position: relative;\n justify-content: center;\n width: 130px;\n text-align: center;\n font-size: 13px;\n transition: .3s;\n}\n\n.copy-to-clipboard {\n white-space: nowrap;\n width: auto;\n}\n\n.copy-the-block > svg {\n width: 16px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.copy-to-clipboard > svg {\n width: 13px;\n}\n\n.knyttneve {\n position: fixed;\n bottom: 20px;\n right: 20px;\n color: #fff;\n border-radius: 20px;\n height: 32px;\n width: 210px;\n font-size: 13px;\n text-align: center;\n overflow: hidden;\n font-weight: 500;\n}\n\n.knyttneve span {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .3s;\n}\n\n.id {\n transform: translateY(-100%);\n}\n\n.knyttneve:hover .id {\n transform: none;\n}\n\n.follow svg {\n width: 14px;\n margin-right: 8px;\n height: 14px;\n}\n\n.knyttneve:hover .follow {\n transform: translateY(100%);\n}\n\n.copy-textarea {\n position: absolute;\n right: -9999990px;\n top: -999999999px;\n opacity: 0;\n}\n\n.codes {\n float: right;\n display: none;\n width: 100%;\n transition: .3s;\n}\n\n.dark-mode .view.show-code, .dark-mode .codes pre {\n background-color: #1a202c !important;\n}\n\n.view.show-code, .codes pre {\n background-color: #fff !important;\n}\n\n.codes pre {\n padding: 20px !important;\n font-size: 13.6px;\n line-height: 1.8;\n}\n\n.react-syntax-highlighter-line-number {\n opacity: 0.2;\n pointer-events: none;\n user-select: none;\n font-size: 12px;\n}\n\npre, code {\n font-family:'Space Mono', monospace;\n font-variant-ligatures: no-contextual;\n}\n\n.view.show-code iframe {\n display: none;\n}\n\n.view.show-code .codes {\n display: block;\n}\n\n.github {\n padding: 8px 12px;\n border-radius: 50px;\n position: fixed;\n right: 20px;\n bottom: 20px;\n background-color: var(--solid-900);\n color: #fff;\n display: inline-flex;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n}\n\n.github svg {\n width: 24px;\n flex-shrink: 0;\n margin-right: 6px;\n}\n\n.dark-mode .github {\n color: #1a202c;\n background-color: #fff;\n}\n\n.clipboard-wrapper {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n position: relative;\n}\n\n.clipboard-tooltip {\n color: #68717d;\n font-size: 13px;\n background-color: #fff;\n padding: 2px 5px;\n letter-spacing: .2px;\n border-radius: 4px;\n position: absolute;\n right: 100%;\n opacity: 0;\n transition: opacity .4s, margin-right .4s;\n}\n\n.clipboard-tooltip.is-copied {\n margin-right: 6px;\n opacity: 1;\n}\n\n@media (max-width: 1060px) {\n .device {\n display: none;\n }\n\n .switcher {\n margin-right: 0;\n }\n}\n\n.keyboard-nav {\n position: fixed;\n right: 158px;\n bottom: 18px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.keyboard-nav-row {\n display: flex;\n}\n\n.keyboard-button {\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 4px;\n flex-shrink: 0;\n margin: 1px;\n opacity: 0.5;\n background-color: var(--base-300);\n color: var(--solid-900);\n padding: 3px;\n position: relative;\n}\n\n.keyboard-nav:hover .keyboard-button:not(:hover) {\n opacity: .2;\n}\n\n.keyboard-button:hover {\n opacity: 1;\n}\n\n.keyboard-button:before {\n content: attr(data-info);\n position: absolute;\n color: var(--solid-900);\n pointer-events: none;\n font-size: 8px;\n text-transform: uppercase;\n transition: opacity .3s;\n text-align: center;\n white-space: nowrap;\n padding: 1px 4px;\n background-color: var(--base-200);\n border-radius: 4px;\n opacity: 0;\n pointer-events: none;\n z-index: -1;\n}\n\n.keyboard-button.is-active {\n animation-name: keyboard;\n animation-duration: .2s;\n animation-fill-mode: forwards;\n}\n\n\n@keyframes keyboard {\n 0% {\n box-shadow: 0;\n }\n 50% {\n box-shadow: 0 0 0 5px var(--main-500);\n z-index: 1;\n }\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n z-index: 1;\n}\n\n.k-up:before {\n left: 50%;\n transform: translateX(-50%);\n top: 24px;\n}\n\n.k-down:before {\n left: 50%;\n transform: translateX(-50%);\n top: -18px;\n}\n\n.k-left:before {\n right: -70px;\n top: 4px;\n}\n\n.k-right:before {\n left: -76px;\n top: 4px;\n}\n\n.keyboard-button:hover:before {\n opacity: 1;\n}\n\n@media (max-width: 960px) {\n .copy-to-clipboard {\n display: none;\n }\n\n .keyboard-nav{\n display: none;\n }\n}\n\n@media (max-width: 760px) {\n .copy-the-block {\n display: none;\n }\n\n .opener {\n width: 40px;\n height: 100%;\n overflow: hidden;\n color: transparent;\n white-space: nowrap;\n }\n\n .opener::before {\n width: 24px;\n height: 24px;\n }\n\n .mode {\n margin-left: auto;\n }\n\n .sidebar {\n z-index: 2;\n }\n\n .switcher {\n position: fixed;\n bottom: 24px;\n z-index: 1;\n background-color: #fff;\n border: 1px solid var(--base-200);\n right: 150px;\n }\n\n .dark-mode .switcher {\n background-color: #1a202c;\n }\n\n .app.has-sidebar .main {\n padding-left: 0;\n }\n}\n\n@media (max-width: 380px) {\n .github {\n width: 36px;\n height: 36px;\n overflow: hidden;\n border-radius: 50%;\n color: transparent;\n white-space: nowrap;\n }\n\n .github svg {\n position: absolute;\n top: 50%;\n left: 50%;\n color: #fff;\n transform: translate(-50%, -50%);\n }\n\n .dark-mode .github {\n color: transparent;\n }\n\n .dark-mode .github svg {\n color: #1a202c;\n }\n\n .switcher {\n right: 70px;\n }\n}\n\n#carbonads {\n display: block;\n overflow: hidden;\n padding: 1em;\n max-width: 130px;\n background: #ffffff;\n text-align: center;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n line-height: 1.5;\n border-radius: 4px;\n border-radius: 6px;\n border: 1px solid #cfd9e3;\n margin-bottom: 15px;\n}\n\n#carbonads a {\n color: inherit;\n text-decoration: none;\n}\n\n#carbonads a:hover {\n color: inherit;\n}\n\n#carbonads span {\n display: block;\n overflow: hidden;\n}\n\n.carbon-img {\n display: block;\n margin: 0 auto 8px;\n line-height: 1;\n}\n\n.carbon-text {\n display: block;\n margin-bottom: 8px;\n}\n\n.carbon-poweredby {\n display: block;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-size: 10px;\n line-height: 1;\n}\n\n.sense {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n@media (min-width: 1200px) {\n .sense {\n transform: scale(.6);\n transform-origin: top;\n margin-top: 20px;\n margin-bottom: -100px;\n }\n}\n"]} \ No newline at end of file