@100mslive/roomkit-react
Version:
4 lines • 122 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../../../../../../tmp/tmp-3149-iW58ivydQA1W/1989ee97c363/tldraw.css", "../../../../../../../../tmp/tmp-3149-iW58ivydQA1W/1989ee97bbb1/index.css"],
"sourcesContent": ["/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ \n/* This file is created by the copy-css-files.mjs script in @tldraw/tldraw. */\n/* It combines @tldraw/editor's editor.css and @tldraw/tldraw's ui.css */\n\n/* @tldraw/editor */\n\n.tl-container {\n\twidth: 100%;\n\theight: 100%;\n\tfont-size: 12px;\n\t/* Spacing */\n\t--space-1: 2px;\n\t--space-2: 4px;\n\t--space-3: 8px;\n\t--space-4: 12px;\n\t--space-5: 16px;\n\t--space-6: 20px;\n\t--space-7: 28px;\n\t--space-8: 32px;\n\t--space-9: 64px;\n\t--space-10: 72px;\n\t/* Radius */\n\t--radius-0: 2px;\n\t--radius-1: 4px;\n\t--radius-2: 6px;\n\t--radius-3: 9px;\n\t--radius-4: 13px;\n\t--layer-background: 100;\n\t--layer-grid: 150;\n\t--layer-canvas: 200;\n\t--layer-shapes: 300;\n\t--layer-overlays: 400;\n\t--layer-following-indicator: 1000;\n\t/* Misc */\n\t--tl-zoom: 1;\n\t--tl-dpr-multiple: 100;\n\t--tl-dpr-multiple-px: calc(var(--tl-dpr-multiple) * 1px);\n\n\t/* Cursor SVGs */\n\t--tl-cursor-none: none;\n\t--tl-cursor-default: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>\")\n\t\t\t12 8,\n\t\tdefault;\n\t--tl-cursor-pointer: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>\")\n\t\t\t14 10,\n\t\tpointer;\n\t--tl-cursor-cross: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>\")\n\t\t\t16 16,\n\t\tcrosshair;\n\t--tl-cursor-move: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>\")\n\t\t\t16 16,\n\t\tmove;\n\t--tl-cursor-grab: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>\")\n\t\t\t16 16,\n\t\tgrab;\n\t--tl-cursor-grabbing: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>\")\n\t\t\t16 16,\n\t\tgrabbing;\n\t--tl-cursor-text: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>\")\n\t\t\t4 10,\n\t\ttext;\n\t--tl-cursor-zoom-in: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>\")\n\t\t\t16 16,\n\t\tzoom-in;\n\t--tl-cursor-zoom-out: url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>\")\n\t\t\t16 16,\n\t\tzoom-out;\n\n\t/* These cursor values get programmatically overridden */\n\t/* They're just here to help your editor autocomplete */\n\t--tl-cursor: var(--tl-cursor-default);\n\t--tl-cursor-resize-edge: ew-resize;\n\t--tl-cursor-resize-corner: nesw-resize;\n\t--tl-cursor-ew-resize: ew-resize;\n\t--tl-cursor-ns-resize: ns-resize;\n\t--tl-cursor-nesw-resize: nesw-resize;\n\t--tl-cursor-nwse-resize: nwse-resize;\n\t--tl-cursor-rotate: pointer;\n\t--tl-cursor-nwse-rotate: pointer;\n\t--tl-cursor-nesw-rotate: pointer;\n\t--tl-cursor-senw-rotate: pointer;\n\t--tl-cursor-swne-rotate: pointer;\n\t--tl-scale: calc(1 / var(--tl-zoom));\n\t--tl-font-draw: 'tldraw_draw', sans-serif;\n\t--tl-font-sans: 'tldraw_sans', sans-serif;\n\t--tl-font-serif: 'tldraw_serif', serif;\n\t--tl-font-mono: 'tldraw_mono', monospace;\n\t--a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);\n\t--b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);\n\t--tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background),\n\t\tvar(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background),\n\t\tvar(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);\n\t/* Own properties */\n\tposition: relative;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: clip;\n}\n\n.tl-theme__light {\n\t--color-accent: #e64a4a;\n\t--color-background: rgb(249, 250, 251);\n\t--color-brush-fill: rgba(144, 144, 144, 0.102);\n\t--color-brush-stroke: rgba(144, 144, 144, 0.251);\n\t--color-grid: rgb(109, 109, 109);\n\t--color-low: hsl(204, 16%, 94%);\n\t--color-low-border: hsl(204, 16%, 92%);\n\t--color-culled: rgb(235, 238, 240);\n\t--color-muted-none: rgba(0, 0, 0, 0);\n\t--color-muted-0: rgba(0, 0, 0, 0.02);\n\t--color-muted-1: rgba(0, 0, 0, 0.1);\n\t--color-muted-2: rgba(0, 0, 0, 0.042);\n\t--color-hint: rgba(0, 0, 0, 0.055);\n\t--color-overlay: rgba(0, 0, 0, 0.2);\n\t--color-divider: #e8e8e8;\n\t--color-panel-contrast: #ffffff;\n\t--color-panel-overlay: rgba(255, 255, 255, 0.82);\n\t--color-panel: #fdfdfd;\n\t--color-focus: #004094;\n\t--color-selected: #2f80ed;\n\t--color-selected-contrast: #ffffff;\n\t--color-selection-fill: #1e90ff06;\n\t--color-selection-stroke: #2f80ed;\n\t--color-text-0: #1d1d1d;\n\t--color-text-1: #2d2d2d;\n\t--color-text-3: #a4a5a7;\n\t--color-text-shadow: #ffffff;\n\t--color-primary: #2f80ed;\n\t--color-warn: #d10b0b;\n\t--color-text: #000000;\n\t--color-laser: #ff0000;\n\n\t--shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.09);\n\t--shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.16), 0px 2px 3px rgba(0, 0, 0, 0.24),\n\t\t0px 2px 6px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast);\n\t--shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.28), 0px 2px 6px rgba(0, 0, 0, 0.14),\n\t\tinset 0px 0px 0px 1px var(--color-panel-contrast);\n\t--shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.19), 0px 5px 4px rgba(0, 0, 0, 0.16),\n\t\t0px 2px 16px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px var(--color-panel-contrast);\n}\n\n.tl-theme__dark {\n\t--color-accent: #e64a4a;\n\t--color-background: #212529;\n\t--color-brush-fill: rgba(180, 180, 180, 0.05);\n\t--color-brush-stroke: rgba(180, 180, 180, 0.25);\n\t--color-grid: #909090;\n\t--color-low: #2c3136;\n\t--color-low-border: #30363b;\n\t--color-culled: rgb(47, 52, 57);\n\t--color-muted-none: rgba(255, 255, 255, 0);\n\t--color-muted-0: rgba(255, 255, 255, 0.02);\n\t--color-muted-1: rgba(255, 255, 255, 0.1);\n\t--color-muted-2: rgba(255, 255, 255, 0.05);\n\t--color-hint: rgba(255, 255, 255, 0.1);\n\t--color-overlay: rgba(0, 0, 0, 0.35);\n\t--color-divider: #49555f;\n\t--color-panel-contrast: #49555f;\n\t--color-panel: #363d44;\n\t--color-panel-overlay: rgba(54, 61, 68, 0.82);\n\t--color-focus: #a5c3f3;\n\t--color-selected: #4285f4;\n\t--color-selected-contrast: #ffffff;\n\t--color-selection-fill: rgba(38, 150, 255, 0.05);\n\t--color-selection-stroke: #2f80ed;\n\t--color-text-0: #f0eded;\n\t--color-text-1: #d9d9d9;\n\t--color-text-3: #6d747b;\n\t--color-text-shadow: #292f35;\n\t--color-primary: #2f80ed;\n\t--color-warn: #ef6464;\n\t--color-text: #f8f9fa;\n\t--color-laser: #ff0000;\n\n\t--shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038,\n\t\tinset 0px 0px 0px 1px var(--color-panel-contrast);\n\t--shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055,\n\t\tinset 0px 0px 0px 1px var(--color-panel-contrast);\n\t--shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22),\n\t\tinset 0px 0px 0px 1px var(--color-panel-contrast);\n}\n\n.tl-counter-scaled {\n\ttransform: scale(var(--tl-scale));\n\ttransform-origin: top left;\n\twidth: calc(100% * var(--tl-zoom));\n\theight: calc(100% * var(--tl-zoom));\n}\n\n.tl-container,\n.tl-container * {\n\t-webkit-touch-callout: none;\n\t-webkit-tap-highlight-color: transparent;\n\tscrollbar-highlight-color: transparent;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t user-select: none;\n\tbox-sizing: border-box;\n\toutline: none;\n}\n\n.tl-container a {\n\t-webkit-touch-callout: initial;\n}\n\n.tl-container:focus-within {\n\toutline: 1px solid var(--color-low);\n}\n\ninput,\n*[contenteditable],\n*[contenteditable] * {\n\t-webkit-user-select: text;\n}\n\n/* -------------------------------------------------- */\n/* Canvas */\n/* -------------------------------------------------- */\n\n.tl-canvas {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tcolor: var(--color-text);\n\tz-index: var(--layer-canvas);\n\tcursor: var(--tl-cursor);\n\toverflow: clip;\n\tcontent-visibility: auto;\n\ttouch-action: none;\n\tcontain: strict;\n}\n\n.tl-fixed-layer {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tcontain: strict;\n\tpointer-events: none;\n}\n\n.tl-shapes {\n\tposition: relative;\n\tz-index: var(--layer-shapes);\n}\n\n.tl-overlays {\n\tposition: relative;\n\tz-index: var(--layer-overlays);\n}\n\n.tl-overlays__item {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\theight: var(--tl-dpr-multiple-px);\n\twidth: var(--tl-dpr-multiple-px);\n\toverflow: visible;\n\tpointer-events: none;\n\ttransform-origin: top left;\n}\n\n.tl-svg-context {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\theight: var(--tl-dpr-multiple-px);\n\twidth: var(--tl-dpr-multiple-px);\n\tpointer-events: none;\n}\n\n.tl-positioned {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\ttransform-origin: top left;\n}\n\n/* ------------------- Background ------------------- */\n\n.tl-background {\n\tposition: absolute;\n\tbackground-color: var(--color-background);\n\tinset: 0px;\n\tz-index: var(--layer-background);\n}\n\n/* --------------------- Grid Layer --------------------- */\n\n.tl-grid {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\ttouch-action: none;\n\tpointer-events: none;\n\tz-index: var(--layer-grid);\n\tcontain: strict;\n}\n\n.tl-grid-dot {\n\tfill: var(--color-grid);\n}\n\n/* --------------------- Layers --------------------- */\n\n.tl-html-layer {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 1px;\n\theight: 1px;\n\tcontain: layout style size;\n}\n\n/* ---------------------- Brush --------------------- */\n\n.tl-brush {\n\tstroke-width: calc(var(--tl-scale) * 1px);\n\tcontain: size layout;\n}\n\n.tl-brush__default {\n\tstroke: var(--color-brush-stroke);\n\tfill: var(--color-brush-fill);\n}\n\n.tl-screenshot-brush {\n\tstroke: var(--color-text-0);\n\tfill: none;\n}\n\n/* -------------------- Scribble -------------------- */\n\n.tl-scribble {\n\tstroke-linejoin: round;\n\tstroke-linecap: round;\n\tpointer-events: none;\n\tcontain: size layout;\n}\n\n/* ---------------------- Shape --------------------- */\n\n.tl-shape {\n\tposition: absolute;\n\tpointer-events: none;\n\toverflow: visible;\n\ttransform-origin: top left;\n\tcontain: size layout;\n}\n\n.tl-shape__culled {\n\tposition: relative;\n\tbackground-color: var(--color-culled);\n}\n\n/* ---------------- Shape Containers ---------------- */\n\n.tl-svg-container {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\tstroke-linecap: round;\n\tstroke-linejoin: round;\n\ttransform-origin: top left;\n\toverflow: visible;\n}\n\n.tl-html-container {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\tstroke-linecap: round;\n\tstroke-linejoin: round;\n\t/* content-visibility: auto; */\n\ttransform-origin: top left;\n\tcolor: inherit;\n}\n\n/* --------------- Overlay Stack --------------- */\n\n/* back of the stack, behind user's stuff */\n.tl-collaborator__scribble {\n\tz-index: 10;\n}\n\n.tl-collaborator__brush {\n\tz-index: 20;\n}\n\n.tl-collaborator__shape-indicator {\n\tz-index: 30;\n}\n\n.tl-user-scribble {\n\tz-index: 40;\n}\n\n.tl-user-brush {\n\tz-index: 50;\n}\n\n.tl-user-indicator__selected {\n\tz-index: 60;\n}\n\n.tl-user-indicator__hovered {\n\tz-index: 70;\n}\n\n.tl-user-handles {\n\tz-index: 80;\n}\n\n.tl-user-snapline {\n\tz-index: 90;\n}\n\n.tl-selection__fg {\n\tpointer-events: none;\n\tz-index: 100;\n}\n\n.tl-user-indicator__hint {\n\tz-index: 110;\n\tstroke-width: calc(2.5px * var(--tl-scale));\n}\n\n/* behind collaborator cursor */\n.tl-collaborator__cursor-hint {\n\tz-index: 120;\n}\n\n.tl-collaborator__cursor {\n\tz-index: 130;\n}\n\n.tl-cursor {\n\toverflow: visible;\n}\n\n/* -------------------- Indicator ------------------- */\n\n.tl-shape-indicator {\n\ttransform-origin: top left;\n\tfill: none;\n\tstroke-width: calc(1.5px * var(--tl-scale));\n\tcontain: size;\n}\n\n/* ------------------ SelectionBox ------------------ */\n\n.tl-selection__bg {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\ttransform-origin: top left;\n\tbackground-color: transparent;\n\tpointer-events: all;\n}\n\n.tl-selection__fg__outline {\n\tfill: none;\n\tpointer-events: none;\n\tstroke: var(--color-selection-stroke);\n\tstroke-width: calc(1.5px * var(--tl-scale));\n}\n\n.tl-corner-handle {\n\tpointer-events: none;\n\tstroke: var(--color-selection-stroke);\n\tfill: var(--color-background);\n\tstroke-width: calc(1.5px * var(--tl-scale));\n}\n\n.tl-text-handle {\n\tpointer-events: none;\n\tfill: var(--color-selection-stroke);\n}\n\n.tl-corner-crop-handle {\n\tpointer-events: none;\n\tfill: none;\n\tstroke: var(--color-selection-stroke);\n}\n\n.tl-corner-crop-edge-handle {\n\tpointer-events: none;\n\tfill: none;\n\tstroke: var(--color-selection-stroke);\n}\n\n.tl-rotate-handle {\n\tstroke: var(--color-selection-stroke);\n\tfill: var(--color-background);\n\tstroke-width: calc(1.5px * var(--tl-scale));\n\tpointer-events: all;\n}\n\n.tl-mobile-rotate__bg {\n\tpointer-events: all;\n\tcursor: var(--tl-cursor-grab);\n}\n\n.tl-mobile-rotate__fg {\n\tpointer-events: none;\n\tstroke: var(--color-selection-stroke);\n\tfill: var(--color-background);\n\tstroke-width: calc(1.5px * var(--tl-scale));\n}\n\n.tl-transparent {\n\tfill: transparent;\n\tstroke: transparent;\n}\n\n/* --------------------- Handles -------------------- */\n\n.tl-handle {\n\tpointer-events: all;\n}\n\n.tl-handle__bg {\n\tfill: transparent;\n\tstroke: transparent;\n\tpointer-events: all;\n\tcursor: var(--tl-cursor-grabbing);\n}\n\n.tl-handle__fg {\n\tfill: var(--color-background);\n\tstroke: var(--color-selection-stroke);\n\tstroke-width: calc(1.5px * var(--tl-scale));\n\tpointer-events: none;\n}\n\n.tl-handle__create {\n\topacity: 0;\n}\n.tl-handle__create:hover {\n\topacity: 1;\n}\n\n.tl-handle__bg:active {\n\tfill: none;\n}\n\n.tl-handle__bg:hover {\n\tcursor: var(--tl-cursor-grab);\n\tfill: var(--color-selection-fill);\n}\n\n@media (pointer: coarse) {\n\t.tl-handle__bg:active {\n\t\tfill: var(--color-selection-fill);\n\t}\n\n\t.tl-handle__create {\n\t\topacity: 1;\n\t}\n}\n\n/* ------------------ Bounds Detail ----------------- */\n\n.tl-image,\n.tl-video {\n\t-o-object-fit: cover;\n\t object-fit: cover;\n\tbackground-size: cover;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.tl-image-container,\n.tl-video-container,\n.tl-embed-container {\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: all;\n\t/* background-color: var(--color-background); */\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.tl-image__tg {\n\t--scale: calc(min(2, var(--tl-scale)));\n\tposition: absolute;\n\ttop: calc(var(--scale) * 8px);\n\tright: calc(var(--scale) * 8px);\n\tfont-size: 10px;\n\ttransform-origin: top right;\n\tbackground-color: var(--color-background);\n\tpadding: 2px 4px;\n\tborder-radius: var(--radius-1);\n}\n\n/* --------------------- Nametag -------------------- */\n\n.tl-collaborator-cursor {\n\tposition: absolute;\n}\n\n.tl-nametag {\n\tposition: absolute;\n\ttop: 16px;\n\tleft: 13px;\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\tmax-width: 120px;\n\tpadding: 3px 6px;\n\twhite-space: nowrap;\n\tposition: absolute;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tfont-size: 12px;\n\tfont-family: var(--font-body);\n\tborder-radius: var(--radius-2);\n\tcolor: var(--color-selected-contrast);\n}\n\n.tl-nametag-title {\n\tposition: absolute;\n\ttop: -2px;\n\tleft: 13px;\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\tpadding: 0px 6px;\n\tmax-width: 120px;\n\twhite-space: nowrap;\n\tposition: absolute;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tfont-size: 12px;\n\tfont-family: var(--font-body);\n\ttext-shadow: var(--tl-text-outline);\n\tcolor: var(--color-selected-contrast);\n}\n\n.tl-nametag-chat {\n\tposition: absolute;\n\ttop: 16px;\n\tleft: 13px;\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\tcolor: var(--color-selected-contrast);\n\twhite-space: nowrap;\n\tposition: absolute;\n\tpadding: 3px 6px;\n\tfont-size: 12px;\n\tfont-family: var(--font-body);\n\topacity: 1;\n\tborder-radius: var(--radius-2);\n}\n\n.tl-cursor-chat {\n\tposition: absolute;\n\tcolor: var(--color-selected-contrast);\n\twhite-space: nowrap;\n\tpadding: 3px 6px;\n\tfont-size: 12px;\n\tfont-family: var(--font-body);\n\tpointer-events: none;\n\tz-index: var(--layer-cursor);\n\tmargin-top: 16px;\n\tmargin-left: 13px;\n\topacity: 1;\n\tborder: none;\n\t-webkit-user-select: text;\n\t -moz-user-select: text;\n\t user-select: text;\n\tborder-radius: var(--radius-2);\n}\n\n.tl-cursor-chat .tl-cursor-chat__bubble {\n\tpadding-right: 12px;\n}\n\n.tl-cursor-chat::-moz-selection {\n\tbackground: var(--color-selected);\n\tcolor: var(--color-selected-contrast);\n\ttext-shadow: none;\n}\n\n.tl-cursor-chat::selection {\n\tbackground: var(--color-selected);\n\tcolor: var(--color-selected-contrast);\n\ttext-shadow: none;\n}\n\n.tl-cursor-chat-fade {\n\t/* Setting to zero causes it to immediately disappear */\n\t/* Setting to near-zero causes it to fade out gradually */\n\topacity: 0.0001;\n\ttransition: opacity 5s ease-in-out;\n}\n\n.tl-cursor-chat::-moz-placeholder {\n\tcolor: var(--color-selected-contrast);\n\topacity: 0.7;\n}\n\n.tl-cursor-chat::placeholder {\n\tcolor: var(--color-selected-contrast);\n\topacity: 0.7;\n}\n\n/* -------------------------------------------------- */\n/* Spinner */\n/* -------------------------------------------------- */\n\n@keyframes spinner {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n.tl-spinner::after {\n\tcontent: '';\n\tbox-sizing: border-box;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\twidth: 20px;\n\theight: 20px;\n\tmargin-top: -10px;\n\tmargin-left: -10px;\n\tborder-radius: 50%;\n\tborder: 2px solid #ccc;\n\tborder-top-color: #000;\n\tanimation: spinner 0.6s linear infinite;\n\tpointer-events: none;\n}\n\n/* -------------------- IconShape ------------------- */\n\n.tl-iconshape__icon {\n\tpointer-events: all;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.tl-icon-preview {\n\twidth: 14px;\n\theight: 14px;\n}\n\n/* ------------------- Text Shape ------------------- */\n\n.tl-text-shape__wrapper {\n\tposition: relative;\n\tfont-weight: normal;\n\tmin-width: 1px;\n\tpadding: 0px;\n\tmargin: 0px;\n\tborder: none;\n\theight: 100%;\n\tfont-variant: normal;\n\tfont-style: normal;\n\tpointer-events: all;\n\twhite-space: pre-wrap;\n\toverflow-wrap: break-word;\n\ttext-shadow: var(--tl-text-outline);\n}\n\n.tl-text-shape__wrapper[data-align='start'] {\n\ttext-align: left;\n}\n\n.tl-text-shape__wrapper[data-align='middle'] {\n\ttext-align: center;\n}\n\n.tl-text-shape__wrapper[data-align='end'] {\n\ttext-align: right;\n}\n\n.tl-text-shape__wrapper[data-font='draw'] {\n\tfont-family: var(--tl-font-draw);\n}\n\n.tl-text-shape__wrapper[data-font='sans'] {\n\tfont-family: var(--tl-font-sans);\n}\n\n.tl-text-shape__wrapper[data-font='serif'] {\n\tfont-family: var(--tl-font-serif);\n}\n\n.tl-text-shape__wrapper[data-font='mono'] {\n\tfont-family: var(--tl-font-mono);\n}\n\n.tl-text-shape__wrapper[data-isediting='true'] .tl-text-content {\n\topacity: 0;\n}\n\n.tl-text {\n\t/* remove overflow from textarea on windows */\n\tmargin: 0px;\n\tpadding: 0px;\n\tborder: 0px;\n\tcolor: inherit;\n\tcaret-color: var(--color-text);\n\tbackground: none;\n\t-o-border-image: none;\n\t border-image: none;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tfont-variant: inherit;\n\tfont-style: inherit;\n\ttext-align: inherit;\n\tletter-spacing: inherit;\n\ttext-shadow: inherit;\n\toutline: none;\n\twhite-space: pre-wrap;\n\tword-wrap: break-word;\n\toverflow-wrap: break-word;\n\tpointer-events: all;\n\ttext-rendering: auto;\n\ttext-transform: none;\n\ttext-indent: 0px;\n\tdisplay: inline-block;\n\t-webkit-appearance: auto;\n\t -moz-appearance: auto;\n\t appearance: auto;\n\t-moz-column-count: initial !important;\n\t column-count: initial !important;\n\twriting-mode: horizontal-tb !important;\n\tword-spacing: 0px;\n}\n\n.tl-text-measure {\n\tposition: absolute;\n\tz-index: 999999;\n\ttop: -9999px;\n\tright: -9999px;\n\topacity: 0;\n\twidth: -moz-max-content;\n\twidth: max-content;\n\tbox-sizing: border-box;\n\tpointer-events: none;\n\tline-break: normal;\n\twhite-space: pre-wrap;\n\tword-wrap: break-word;\n\toverflow-wrap: break-word;\n\tresize: none;\n\tborder: none;\n\t-moz-user-select: none;\n\t user-select: none;\n\tcontain: style paint;\n\t-webkit-user-select: none;\n}\n\n.tl-text-edit-container {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.tl-text-input,\n.tl-text-content {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tmin-width: 1px;\n\tmin-height: 1px;\n\toverflow: visible;\n\toutline: none;\n}\n\n.tl-text-content {\n\tpointer-events: none;\n}\n\n.tl-text-input {\n\tresize: none;\n\t-moz-user-select: all;\n\t user-select: all;\n\t-webkit-user-select: text;\n\toverflow: hidden;\n\tcursor: var(--tl-cursor-text);\n}\n\n.tl-text-input::-moz-selection {\n\tbackground: var(--color-selected);\n\tcolor: var(--color-selected-contrast);\n\ttext-shadow: none;\n}\n\n.tl-text-input::selection {\n\tbackground: var(--color-selected);\n\tcolor: var(--color-selected-contrast);\n\ttext-shadow: none;\n}\n\n/* ------------------- Snap Lines ------------------- */\n\n.tl-snap-line {\n\tstroke: var(--color-accent);\n\tstroke-width: calc(1px * var(--tl-scale));\n\tfill: none;\n}\n\n.tl-snap-point {\n\tstroke: var(--color-accent);\n\tstroke-width: calc(1px * var(--tl-scale));\n\tfill: none;\n}\n\n/* -------------------- Groups ------------------ */\n\n.tl-group {\n\tstroke: var(--color-text);\n\tstroke-width: calc(1px * var(--tl-scale));\n\topacity: 0.5;\n}\n\n/* ------------------- Bookmark Shape ------------------- */\n\n.tl-bookmark__container {\n\twidth: 100%;\n\theight: 100%;\n\tposition: relative;\n\tborder: 1px solid var(--color-panel-contrast);\n\tbackground-color: var(--color-panel);\n\tborder-radius: var(--radius-2);\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n}\n\n.tl-bookmark__image_container {\n\tflex: 1;\n\toverflow: hidden;\n\tborder-top-left-radius: var(--radius-1);\n\tborder-top-right-radius: var(--radius-1);\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: flex-start;\n}\n\n.tl-bookmark__image_container > .tl-hyperlink-button::after {\n\tbackground-color: var(--color-panel);\n}\n\n.tl-bookmark__placeholder {\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--color-muted-2);\n\tborder-bottom: 1px solid var(--color-muted-2);\n}\n\n.tl-bookmark__image {\n\twidth: 100%;\n\theight: 100%;\n\t-o-object-fit: cover;\n\t object-fit: cover;\n\t-o-object-position: center;\n\t object-position: center;\n}\n\n.tl-bookmark__copy_container {\n\tbackground-color: var(--color-muted);\n\tpadding: var(--space-4);\n\tpointer-events: all;\n}\n\n.tl-bookmark__heading,\n.tl-bookmark__description,\n.tl-bookmark__link {\n\tmargin: 0px;\n\twidth: 100%;\n\tfont-family: inherit;\n}\n\n.tl-bookmark__heading {\n\tfont-size: 16px;\n\tfont-weight: bold;\n\tpadding-bottom: var(--space-2);\n\tmargin: 8px 0px;\n}\n\n.tl-bookmark__description {\n\tfont-size: 12px;\n\tpadding-bottom: var(--space-4);\n}\n\n.tl-bookmark__link {\n\tfont-size: 14px;\n\tpointer-events: all;\n\tz-index: 999;\n\toverflow: hidden;\n\tdisplay: block;\n\tcolor: var(--color-text);\n\ttext-overflow: ellipsis;\n\ttext-decoration: none;\n\tcolor: var(--color-text-1);\n\tcursor: var(--tl-cursor-pointer);\n}\n\n.tl-bookmark__link:hover {\n\tcolor: var(--color-selected);\n}\n\n/* ---------------- Hyperlink Button ---------------- */\n\n.tl-hyperlink-button {\n\tbackground: none;\n\tmargin: 0px;\n\tposition: absolute;\n\ttop: 0px;\n\tright: 0px;\n\theight: 44px;\n\twidth: 44px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 200;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tcolor: var(--color-text-1);\n\tpadding: 13px;\n\tcursor: var(--tl-cursor-pointer);\n\tborder: none;\n\toutline: none;\n\tpointer-events: all;\n}\n\n.tl-hyperlink-button::after {\n\tcontent: '';\n\tz-index: -1;\n\tposition: absolute;\n\tright: 6px;\n\tbottom: 6px;\n\tdisplay: block;\n\twidth: calc(100% - 12px);\n\theight: calc(100% - 12px);\n\tborder-radius: var(--radius-1);\n\tbackground-color: var(--color-background);\n\tpointer-events: none;\n}\n\n.tl-hyperlink-button:hover {\n\tcolor: var(--color-selected);\n}\n\n.tl-hyperlink-button:focus-visible {\n\tcolor: var(--color-selected);\n}\n\n.tl-hyperlink-button__icon {\n\twidth: 18px;\n\theight: 18px;\n\tbackground-color: currentColor;\n\tpointer-events: none;\n}\n\n.tl-hyperlink-button__hidden {\n\tdisplay: none;\n}\n\n/* ---------------- Geo shape ---------------- */\n\n.tl-text-label {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--color-text);\n\ttext-shadow: var(--tl-text-outline);\n\tline-height: inherit;\n\tposition: absolute;\n\tinset: 0px;\n\tz-index: 10;\n}\n\n.tl-text-label[data-isediting='true'] .tl-text-content {\n\topacity: 0;\n}\n\n.tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {\n\twidth: 40px;\n\theight: 40px;\n}\n\n.tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content {\n\tpointer-events: all;\n}\n\n.tl-text-label__inner {\n\tposition: relative;\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpointer-events: all;\n\tmin-height: auto;\n}\n\n.tl-text-label__inner > .tl-text {\n\tposition: relative;\n\ttop: 0px;\n\tleft: 0px;\n\tpadding: 16px;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\tborder-radius: var(--radius-1);\n\tmax-width: 100%;\n\tz-index: 3;\n}\n\n.tl-text-label__inner > .tl-text-input {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tpadding: 16px;\n\tz-index: 4;\n}\n\n.tl-text-label[data-textwrap='true'] > .tl-text-label__inner {\n\tmax-width: 100%;\n}\n\n.tl-text-label[data-isediting='true'] {\n\tbackground-color: transparent;\n\tmin-height: auto;\n}\n\n.tl-text-label[data-isediting='true'] p {\n\topacity: 0;\n}\n\n.tl-text-label[data-align='start'],\n.tl-text-label[data-align='start-legacy'] {\n\ttext-align: left;\n}\n\n.tl-text-label[data-align='middle'],\n.tl-text-label[data-align='middle-legacy'] {\n\ttext-align: center;\n}\n\n.tl-text-label[data-align='end'],\n.tl-text-label[data-align='end-legacy'] {\n\ttext-align: right;\n}\n\n.tl-arrow-hint {\n\tstroke: var(--color-text-1);\n\tfill: none;\n\tstroke-linecap: round;\n\toverflow: visible;\n}\n\n.tl-arrow-label[data-font='draw'],\n.tl-text-label[data-font='draw'] {\n\tfont-family: var(--tl-font-draw);\n}\n\n.tl-arrow-label[data-font='sans'],\n.tl-text-label[data-font='sans'] {\n\tfont-family: var(--tl-font-sans);\n}\n\n.tl-arrow-label[data-font='serif'],\n.tl-text-label[data-font='serif'] {\n\tfont-family: var(--tl-font-serif);\n}\n\n.tl-arrow-label[data-font='mono'],\n.tl-text-label[data-font='mono'] {\n\tfont-family: var(--tl-font-mono);\n}\n\n/* ------------------- Arrow Shape ------------------ */\n\n.tl-arrow-label {\n\tposition: absolute;\n\ttop: -1px;\n\tleft: -1px;\n\twidth: 2px;\n\theight: 2px;\n\tpadding: 0px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: var(--color-text);\n\ttext-shadow: var(--tl-text-outline);\n}\n\n.tl-arrow-label[data-isediting='true'] p {\n\topacity: 0;\n}\n\n.tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner {\n\tbackground-color: var(--color-background);\n}\n\n.tl-arrow-label__inner {\n\tborder-radius: var(--radius-1);\n\tbox-sizing: content-box;\n\tposition: relative;\n\theight: -moz-max-content;\n\theight: max-content;\n\twidth: -moz-max-content;\n\twidth: max-content;\n\tpointer-events: all;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n}\n\n.tl-arrow-label p,\n.tl-arrow-label textarea {\n\tmargin: 0px;\n\tpadding: 0px;\n\tborder: 0px;\n\tcolor: inherit;\n\tcaret-color: var(--color-text);\n\tbackground: none;\n\t-o-border-image: none;\n\t border-image: none;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\tline-height: inherit;\n\tfont-variant: inherit;\n\tfont-style: inherit;\n\ttext-align: inherit;\n\tletter-spacing: inherit;\n\ttext-shadow: inherit;\n\toutline: none;\n\twhite-space: pre-wrap;\n\tword-wrap: break-word;\n\toverflow-wrap: break-word;\n\tpointer-events: all;\n\ttext-rendering: auto;\n\ttext-transform: none;\n\ttext-indent: 0px;\n\tdisplay: inline-block;\n\t-webkit-appearance: auto;\n\t -moz-appearance: auto;\n\t appearance: auto;\n\t-moz-column-count: initial !important;\n\t column-count: initial !important;\n\twriting-mode: horizontal-tb !important;\n\tword-spacing: 0px;\n}\n\n.tl-arrow-label p {\n\tposition: relative;\n\theight: -moz-max-content;\n\theight: max-content;\n\tz-index: 2;\n\tpadding: 4px;\n\toverflow: visible;\n}\n\n.tl-arrow-label textarea {\n\tz-index: 3;\n\tmargin: 0px;\n\tpadding: 4px;\n\theight: 100%;\n\twidth: 100%;\n\tposition: absolute;\n\tresize: none;\n\tborder: 0px;\n\t-moz-user-select: all;\n\t user-select: all;\n\t-webkit-user-select: text;\n\tcaret-color: var(--color-text);\n\t-o-border-image: none;\n\t border-image: none;\n\t/* Don't allow textarea to be zero width */\n\tmin-width: 4px;\n}\n\n/* -------------------- NoteShape ------------------- */\n\n.tl-note__container {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: var(--radius-2);\n\tbox-shadow: var(--shadow-1);\n\toverflow: hidden;\n\tborder-color: currentColor;\n\tborder-style: solid;\n\tborder-width: 1px;\n}\n\n.tl-note__container .tl-text-label {\n\ttext-shadow: none;\n}\n\n.tl-note__scrim {\n\tposition: absolute;\n\tz-index: 1;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--color-background);\n\topacity: 0.28;\n}\n\n.tl-loading {\n\tbackground-color: var(--color-background);\n\tcolor: var(--color-text-1);\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: var(--space-2);\n\tfont-size: 14px;\n\tfont-weight: 500;\n\topacity: 0;\n\tanimation: fade-in 0.2s ease-in-out forwards;\n\tanimation-delay: 0.2s;\n}\n\n@keyframes fade-in {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n/* -------------------- FrameShape ------------------- */\n\n.tl-frame__body {\n\tstroke-width: calc(1px * var(--tl-scale));\n}\n\n.tl-frame__creating {\n\tstroke: var(--color-selected);\n\tfill: none;\n}\n\n.tl-frame__hitarea {\n\tborder-style: solid;\n\tborder-width: calc(8px * var(--tl-scale));\n\tborder-color: transparent;\n\tbackground: none;\n\tpointer-events: stroke;\n\tbox-sizing: border-box;\n\ttop: calc(-8px * var(--tl-scale));\n\tleft: calc(-8px * var(--tl-scale));\n\twidth: calc(100% + calc(16px * var(--tl-scale)));\n\theight: calc(100% + calc(16px * var(--tl-scale)));\n\tz-index: 1;\n\tposition: absolute;\n}\n\n.tl-frame-heading {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: absolute;\n\ttransform-origin: 0% 100%;\n\toverflow: hidden;\n\tmax-width: 100%;\n\tmin-width: 32px;\n\theight: auto;\n\tfont-size: 12px;\n\tpadding-bottom: 4px;\n\tpointer-events: all;\n}\n\n.tl-frame-heading-hit-area {\n\tpointer-events: all;\n\t/* scale from bottom left corner so we can pin it to the top left corner of the frame */\n\ttransform-origin: 0% 100%;\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n\talign-items: center;\n\tborder-radius: var(--radius-1);\n\tbackground-color: var(--color-background);\n}\n\n.tl-frame-label {\n\tpointer-events: all;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: var(--space-3) var(--space-3);\n\tposition: relative;\n\tfont-size: inherit;\n\twhite-space: pre;\n\tborder: 1px solid transparent;\n}\n\n.tl-frame-label__editing {\n\tcolor: transparent;\n\twhite-space: pre;\n\twidth: auto;\n\toverflow: visible;\n\tbackground-color: var(--color-panel);\n\tborder-radius: var(--radius-1);\n\tborder-color: var(--color-selected);\n}\n\n.tl-frame-name-input {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\tborder: none;\n\tbackground: none;\n\toutline: none;\n\tpadding: var(--space-3) var(--space-3);\n\tinset: 0px;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tfont-weight: inherit;\n\twidth: 100%;\n\tcolor: var(--color-text-1);\n\tborder-radius: var(--radius-1);\n\t-moz-user-select: all;\n\t user-select: all;\n\t-webkit-user-select: text;\n\twhite-space: pre;\n\tcursor: var(--tl-cursor-text);\n}\n\n/* If mobile use 16px as font size */\n/* On iOS, font size under 16px in an input will make the page zoom into the input \uD83E\uDD26\u200D\u2642\uFE0F */\n/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */\n@media (max-width: 600px) {\n\t.tl-frame-heading {\n\t\tfont-size: 16px;\n\t}\n}\n\n/* ------------------ iFrames Detail ----------------- */\n\n.tl-embed {\n\tborder: none;\n\tborder-radius: var(--radius-2);\n}\n\n/* ------------------- Code Editor ------------------ */\n\n.tl-image__button {\n\tpadding: 4px 8px;\n\tcolor: var(--color-text);\n\tbackground-color: var(--color-panel);\n\tborder-radius: var(--radius-2);\n\tbox-shadow: var(--shadow-1);\n\tpointer-events: all;\n\tcursor: var(--tl-cursor-pointer);\n\toutline: none;\n\tdisplay: flex;\n}\n\n.tl-image__button:disabled {\n\topacity: 0.5;\n\tpointer-events: none;\n}\n\n.tl-image__toolbox {\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tpadding: 10px;\n}\n\n.tl-image__toolbox__hidden {\n\tdisplay: none;\n}\n\n/* -------------- Shape Error Boundary -------------- */\n\n.tl-shape-error-boundary {\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--color-muted-1);\n\tborder-width: calc(1px * var(--tl-scale));\n\tborder-color: var(--color-muted-1);\n\tborder-style: solid;\n\tborder-radius: calc(var(--radius-1) * var(--tl-scale));\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: left;\n\tposition: relative;\n\tpointer-events: all;\n\toverflow: hidden;\n\tpadding: var(--space-2);\n}\n\n.tl-shape-error-boundary::before {\n\ttransform: scale(var(--tl-scale));\n\tcontent: 'Error';\n\tfont-size: 12px;\n\tfont-family: inherit;\n\tcolor: var(--color-text-0);\n}\n\n/* ----------------- Error Boundary ----------------- */\n\n.tl-error-boundary {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: var(--space-4);\n\tbackground-color: var(--color-background);\n\tcolor: var(--color-text-1);\n\tposition: absolute;\n\tz-index: 600;\n}\n\n.tl-error-boundary__overlay {\n\tposition: absolute;\n\tinset: 0px;\n\tz-index: 500;\n\tbackground-color: var(--color-overlay);\n}\n\n.tl-error-boundary__content * {\n\t-moz-user-select: all;\n\t user-select: all;\n\t-webkit-user-select: text;\n\tpointer-events: all;\n}\n\n.tl-error-boundary__canvas {\n\tpointer-events: none;\n\tposition: absolute;\n\tinset: 0px;\n\tz-index: -1;\n}\n/* some browsers seem to have some weird interactions between stacking contexts\nand pointer-events. this ::after pseudo element covers the canvas and prevents\nit from receiving any pointer events or affecting the cursor. */\n.tl-error-boundary__canvas::after {\n\tcontent: ' ';\n\tdisplay: block;\n\tposition: absolute;\n\tinset: 0px;\n\tz-index: 600;\n\tpointer-events: all;\n}\n\n.tl-error-boundary__content {\n\twidth: -moz-fit-content;\n\twidth: fit-content;\n\theight: -moz-fit-content;\n\theight: fit-content;\n\tmax-width: 100%;\n\twidth: 400px;\n\tmax-height: 100%;\n\tbackground-color: var(--color-panel);\n\tpadding: 16px;\n\tborder-radius: 16px;\n\tbox-shadow: var(--shadow-2);\n\tfont-size: 14px;\n\tfont-weight: 400;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: auto;\n\tz-index: 600;\n\tgap: 12px;\n}\n\n.tl-error-boundary__content__expanded {\n\twidth: 600px;\n}\n\n.tl-error-boundary__content h2 {\n\tfont-size: 16px;\n\tmargin: 0px;\n\tfont-weight: 500;\n}\n\n.tl-error-boundary__content p {\n\tline-height: 1.5;\n\tmargin: 0px;\n}\n\n.tl-error-boundary__content pre {\n\tbackground-co