@kitschpatrol/tldraw-cli 3.1.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/bin/cli.js +1200 -179
  2. package/dist/.DS_Store +0 -0
  3. package/dist/lib/index.d.ts +2 -1
  4. package/dist/lib/index.js +759 -86
  5. package/dist/lib/local-tldraw-server.d.ts +1 -2
  6. package/dist/lib/tldraw-controller.d.ts +3 -2
  7. package/dist/lib/tldraw-to-image.d.ts +1 -2
  8. package/dist/lib/utilities/log.d.ts +12 -0
  9. package/dist/lib/utilities/logger.d.ts +8 -0
  10. package/dist/tldraw/assets/index-1gkReWLJ.css +1 -0
  11. package/dist/tldraw/assets/index-R37c2LB5.js +315 -0
  12. package/dist/tldraw/icons/icon/checkbox-empty.svg +1 -1
  13. package/dist/tldraw/index.html +2 -2
  14. package/dist/tldraw/translations/main.json +3 -0
  15. package/package.json +12 -9
  16. package/readme.md +46 -32
  17. package/dist/tldraw/assets/index-S3CdIkLU.css +0 -1
  18. package/dist/tldraw/assets/index-ehug49np.js +0 -315
package/dist/tldraw/icons/icon/checkbox-empty.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><path stroke="#000" stroke-opacity=".5" stroke-width="2" d="M8 8h14v14H8z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none"><path stroke="#000" stroke-width="3" d="M7.276 5.496h17.509a1.72 1.72 0 0 1 1.72 1.72v17.508a1.78 1.78 0 0 1-1.78 1.78H7.402a1.907 1.907 0 0 1-1.907-1.907V7.276a1.78 1.78 0 0 1 1.78-1.78z"/></svg>
package/dist/tldraw/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>tldraw via tldraw-cli</title>
7
- <script type="module" crossorigin src="/assets/index-ehug49np.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-S3CdIkLU.css">
7
+ <script type="module" crossorigin src="/assets/index-R37c2LB5.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-1gkReWLJ.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/tldraw/translations/main.json CHANGED
@@ -137,6 +137,9 @@
137
137
  "align-style.middle": "Middle",
138
138
  "align-style.end": "End",
139
139
  "align-style.justify": "Justify",
140
+ "verticalAlign-style.start": "Top",
141
+ "verticalAlign-style.middle": "Middle",
142
+ "verticalAlign-style.end": "Bottom",
140
143
  "geo-style.arrow-down": "Arrow down",
141
144
  "geo-style.arrow-left": "Arrow left",
142
145
  "geo-style.arrow-right": "Arrow right",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kitschpatrol/tldraw-cli",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "type": "module",
5
5
  "description": "A tiny little CLI tool for exporting tldraw sketches to svg or png images.",
6
6
  "repository": {
@@ -43,34 +43,37 @@
43
43
  ],
44
44
  "dependencies": {
45
45
  "express": "^4.18.2",
46
- "puppeteer": "^21.7.0"
46
+ "puppeteer": "^22.0.0"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@kitschpatrol/shared-config": "^4.3.3",
50
50
  "@sindresorhus/slugify": "^2.2.1",
51
- "@tldraw/assets": "2.0.0-canary.ade38247d8a4",
52
- "@tldraw/tldraw": "2.0.0-canary.ade38247d8a4",
51
+ "@tldraw/assets": "2.0.0-canary.e6e4e7f6cbac",
52
+ "@tldraw/tldraw": "2.0.0-canary.e6e4e7f6cbac",
53
53
  "@types/express": "^4.17.21",
54
- "@types/react": "^18.2.48",
54
+ "@types/react": "^18.2.53",
55
55
  "@types/react-dom": "^18.2.18",
56
56
  "@types/yargs": "^17.0.32",
57
- "@vitejs/plugin-react-swc": "^3.5.0",
57
+ "@vitejs/plugin-react-swc": "^3.6.0",
58
58
  "bumpp": "^9.3.0",
59
+ "chalk": "^5.3.0",
59
60
  "cheerio": "1.0.0-rc.12",
60
- "esbuild": "^0.19.11",
61
+ "esbuild": "^0.20.0",
61
62
  "eslint-plugin-react-hooks": "^4.6.0",
62
63
  "eslint-plugin-react-refresh": "^0.4.5",
63
64
  "get-port": "^7.0.0",
64
- "nanoid": "^5.0.4",
65
+ "nanoid": "^5.0.5",
65
66
  "open": "^10.0.3",
66
67
  "path-type": "^5.0.0",
68
+ "plur": "^5.1.0",
69
+ "pretty-ms": "^9.0.0",
67
70
  "react": "^18.2.0",
68
71
  "react-dom": "^18.2.0",
69
72
  "tsx": "^4.7.0",
70
73
  "typescript": "^5.3.3",
71
74
  "untildify": "^5.0.0",
72
75
  "vite": "^5.0.12",
73
- "vitest": "^1.2.1",
76
+ "vitest": "^1.2.2",
74
77
  "yargs": "^17.7.2"
75
78
  },
76
79
  "publishConfig": {
package/readme.md CHANGED
@@ -44,11 +44,11 @@ tldraw-cli <command>
44
44
 
45
45
  The top-level collection of CLI tools for tldraw.
46
46
 
47
- | Argument | Description |
48
- | --------- | ------------------- |
49
- | `command` | `export` or `open`. |
47
+ | Argument | Description |
48
+ | --------- | ----------------------------------------------------------------- |
49
+ | `command` | CLI tools for tldraw. Available commands are `export` and `open`. |
50
50
 
51
- | Option | Alias | Description Value |
51
+ | Option | Alias | Description |
52
52
  | ----------- | ----- | -------------------- |
53
53
  | `--help ` | `-h` | Show help. |
54
54
  | `--version` | `-v` | Show version number. |
@@ -56,42 +56,40 @@ The top-level collection of CLI tools for tldraw.
56
56
  #### Command: Export
57
57
 
58
58
  ```sh
59
- tldraw-cli export <file-or-url>
59
+ tldraw-cli export <files-or-urls..>
60
60
  ```
61
61
 
62
62
  Export a tldraw `.tldr` file or tldraw\.com URL to SVG, PNG, and other formats.
63
63
 
64
- | Argument | Description |
65
- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
66
- | `<file-or-url>` | The sketch to export — either a path to a local `.tldr` file, or a tldraw\.com sketch URL. Prints the absolute path(s) to the exported image(s) to `stdout`. |
67
-
68
- | Option | Alias | Description Value | Default Value |
69
- | ------------------- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
70
- | `--format <string>` | `-f` | Output image format, one of `svg`, `png`, `json`, or `tldr`. | `svg` |
71
- | `--dark-mode ` | `-d` | Output a dark theme version of the image. | `false` |
72
- | `--transparent ` | `-t` | Output an image with a transparent background. | `false` |
73
- | `--output <string>` | `-o` | Output directory. | `./` |
74
- | `--name <string>` | `-n` | Output file name without extension; by default the original file name or URL id is used. | |
75
- | `--frames <array?>` | | Export each sketch "frame" as a separate image. Pass one or more frame names or IDs to export specific frames, or skip the arguments to export all frames. | `false` |
76
- | `--strip-style` | | Remove `<style>` elements from SVG output, useful to lighten the load of embedded fonts if you intend to provide your own stylesheets. | `false` |
77
- | `--print` | `-p` | Print the exported image(s) to stdout instead of saving to a file. Incompatible with --output, and overrides --name. PNGs are printed as base64-encoded strings. | `false` |
78
- | `--verbose` | | Enable verbose output. | `false` |
64
+ | Argument | Description |
65
+ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66
+ | `<files-or-urls..>` | The tldraw sketch to export. May be one or more paths to local `.tldr` files, or tldraw.com sketch URLs. Accepts a mix of both file paths and URLs, and supports glob matching via your shell. Prints the absolute path(s) to the exported image(s) to `stdout`. |
67
+
68
+ | Option | Alias | Description | Default Value |
69
+ | ------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
70
+ | `--format [string]` | `-f` | Output image format, one of `svg`, `png`, `json`, or `tldr`. | `svg` |
71
+ | `--output <string>` | `-o` | Output image directory. | `./` |
72
+ | `--name <string>` | `-n` | Output image name (without extension). By default the original file name or URL id is used. | |
73
+ | `--frames [array]` | | Export each sketch "frame" as a separate image. Pass one or more frame names or IDs to export specific frames, or skip the arguments to export all frames. | `false` |
74
+ | `--transparent ` | `-t` | Export an image with a transparent background. | `false` |
75
+ | `--dark ` | `-d` | Export a dark theme version of the image. | `false` |
76
+ | `--strip-style` | | Remove `<style>` elements from SVG output, useful to lighten the load of embedded fonts if you intend to provide your own stylesheets. Applies to SVG output only. | `false` |
77
+ | `--print` | `-p` | Print the exported image(s) to stdout instead of saving to a file. Incompatible with `--output`, and ignores `--name`. PNGs are printed as base64-encoded strings. | `false` |
78
+ | `--verbose` | | Enable verbose logging. All verbose logs and prefixed with their log level and are printed to `stderr` for ease of redirection. | `false` |
79
79
 
80
80
  #### Command: Open
81
81
 
82
82
  ```sh
83
- tldraw-cli open [file-or-url]
83
+ tldraw-cli open [files-or-urls..]
84
84
  ```
85
85
 
86
- Open a tldraw `.tldr` file or tldraw\.com URL your default browser. Uses a locally-hosted instance of tldraw. Call `open` without an argument to open a blank sketch.
87
-
88
- Sketches opened via URL are copied to the local system, and will not be kept in sync with tldraw.com.
86
+ Open a tldraw `.tldr` file or tldraw\.com URL your default browser. Uses a locally-hosted instance of tldraw. Call `open` without an argument to open a blank sketch. Sketches opened via URL are temporarily copied to the local system, and will not be kept in sync with tldraw.com. This command does not exit until the browser is closed.
89
87
 
90
88
  _"Save as" support is not yet implemented in the local tldraw instance, so the `open` command is only recommended for viewing purposes at the moment._
91
89
 
92
- | Argument | Description |
93
- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
94
- | `[file-or-url]` | The `.tldr` file or tldraw\.com sketch url to open. Omit the argument to open a blank sketch. Prints the url of the local server to `stdout`. |
90
+ | Argument | Description |
91
+ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
92
+ | `[files-or-urls..]` | The `.tldr` file(s) or tldraw\.com sketch URL(s) to open. Omit the argument to open a blank sketch. Supports glob matching via your shell. Prints the URL of the local server to `stdout`. |
95
93
 
96
94
  No options.
97
95
 
@@ -125,7 +123,7 @@ tldraw-cli export https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4 --format t
125
123
 
126
124
  This is approximately equivalent to clicking the tldraw\.com "☰ → File → Save a copy" menu item.
127
125
 
128
- Note that using `--format tldr` with a _file path_ instead of a _URL_ will still send the file through the pipeline, but it's effectively a no-op. (Except perhaps rare edge cases where tldraw performs a file format version migration).
126
+ Note that using `--format tldr` with a _file path_ instead of a _URL_ will still send the file through the pipeline, but it's effectively a no-op. (Except perhaps in rare edge cases where tldraw performs a file format version migration).
129
127
 
130
128
  ### Export to a specific image / file format
131
129
 
@@ -221,18 +219,17 @@ The library exports a single async function, `tldrawToImage`, which takes an opt
221
219
  async function tldrawToImage(
222
220
  tldrPathOrUrl: string,
223
221
  {
224
- darkMode?: boolean
222
+ dark?: boolean
225
223
  format?: 'svg' | 'png' | 'json' | 'tldr'
226
224
  frames?: boolean | string[]
227
225
  name?: string
228
226
  output?: string
229
227
  stripStyle?: boolean
230
228
  transparent?: boolean
231
- verbose?: boolean
232
229
  }): Promise<string[]>;
233
230
  ```
234
231
 
235
- The function exports the image in the requested format returns an array of the output image(s) or file(s).
232
+ The function exports the image in the requested format and returns an array of the output image(s) or file(s).
236
233
 
237
234
  Generally, a single file is returned — but the `string[]` return type also accommodates invocations with `frame: true` where multiple images will be generated.
238
235
 
@@ -271,6 +268,22 @@ await tldrawToImage('https://www.tldraw.com/s/v2_c_FI5RYWbdpAtjsy4OIKrKw', {
271
268
  })
272
269
  ```
273
270
 
271
+ By default, the Node API only logs warnings and errors. If you want to log the equivalent of the `--verbose` flag from the command line version, then you can set a flag on a logging object exported from the library:
272
+
273
+ ```ts
274
+ // tldraw-cli-api-verbose-test.ts
275
+
276
+ import { tldrawToImage, log } from '@kitschpatrol/tldraw-cli'
277
+
278
+ // this will log extra info
279
+ log.verbose = true
280
+ await tldrawToImage('https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4')
281
+
282
+ // now we'll only log errors and warnings
283
+ log.verbose = false
284
+ await tldrawToImage('https://www.tldraw.com/s/v2_c_JsxJk8dag6QsrqExukis4')
285
+ ```
286
+
274
287
  _Note that the library provided is ESM-only, and requires a Node-compatible runtime. TypeScript type definitions are included._
275
288
 
276
289
  ## Background
@@ -293,7 +306,7 @@ On Discord:
293
306
 
294
307
  This tool is not a part of the official tldraw project, and it is currently only tested and known to be compatible with tldraw 2.0.0-beta.2.\_
295
308
 
296
- Due to the current implementation of tldraw, export depends on functionality provided by a web browser. So, behind the scenes, this app serves a local instance of tldraw, then loads a `.tldr` and invokes the export download via [Puppeteer](https://pptr.dev).
309
+ Due to the current implementation of tldraw, export depends on functionality provided by a web browser. So, behind the scenes, this app serves a local instance of tldraw, then loads a `.tldr` and invokes the export download via the [Puppeteer](https://pptr.dev) headless browser automation tool.
297
310
 
298
311
  This can be a bit slow, (exporting seems to take a second or two), but in the context of a statically-generated content pipeline it's not the end of the world.
299
312
 
@@ -306,6 +319,7 @@ The local instance of tldraw includes its assets dependencies, so the tool shoul
306
319
  This is a very minimal implementation. Current plans for future improvements include the following:
307
320
 
308
321
  - Add save button to local tldraw
322
+ - Accept globs and optimize batch processing with a single Puppeteer instance
309
323
  - Add CLI tests
310
324
  - Implement the ability to export specific pages as separate image files
311
325
  - Add an option flag to set dpi when exporting to a bitmap format
package/dist/tldraw/assets/index-S3CdIkLU.css DELETED
@@ -1 +0,0 @@
1
- .tl-container{font-size:12px;--space-1: 2px;--space-2: 4px;--space-3: 8px;--space-4: 12px;--space-5: 16px;--space-6: 20px;--space-7: 28px;--space-8: 32px;--space-9: 64px;--space-10: 72px;--radius-0: 2px;--radius-1: 4px;--radius-2: 6px;--radius-3: 9px;--radius-4: 11px;--layer-background: 100;--layer-grid: 150;--layer-canvas: 200;--layer-shapes: 300;--layer-overlays: 400;--layer-following-indicator: 1000;--tl-zoom: 1;--tl-cursor-none: none;--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>") 12 8, default;--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>") 14 10, pointer;--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>") 16 16, crosshair;--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>") 16 16, move;--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>") 16 16, grab;--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>") 16 16, grabbing;--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>") 4 10, text;--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>") 16 16, zoom-in;--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>") 16 16, zoom-out;--tl-cursor: var(--tl-cursor-default);--tl-cursor-resize-edge: ew-resize;--tl-cursor-resize-corner: nesw-resize;--tl-cursor-ew-resize: ew-resize;--tl-cursor-ns-resize: ns-resize;--tl-cursor-nesw-resize: nesw-resize;--tl-cursor-nwse-resize: nwse-resize;--tl-cursor-rotate: pointer;--tl-cursor-nwse-rotate: pointer;--tl-cursor-nesw-rotate: pointer;--tl-cursor-senw-rotate: pointer;--tl-cursor-swne-rotate: pointer;--tl-scale: calc(1 / var(--tl-zoom));--tl-font-draw: "tldraw_draw", sans-serif;--tl-font-sans: "tldraw_sans", sans-serif;--tl-font-serif: "tldraw_serif", serif;--tl-font-mono: "tldraw_mono", monospace;--a: calc(min(.5, 1 / var(--tl-zoom))*2px) ;--b: calc(min(.5, 1 / var(--tl-zoom))*-2px) ;--tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background);position:relative;top:0;left:0;width:100%;height:100%;overflow:clip}.tl-theme__light{--color-accent: hsl(0, 76%, 60%);--color-background: hsl(210, 20%, 98%);--color-brush-fill: hsl(0, 0%, 56%, 10.2%);--color-brush-stroke: hsl(0, 0%, 56%, 25.1%);--color-grid: hsl(0, 0%, 43%);--color-low: hsl(204, 16%, 94%);--color-low-border: hsl(204, 16%, 92%);--color-culled: hsl(204, 14%, 93%);--color-muted-none: hsl(0, 0%, 0%, 0%);--color-muted-0: hsl(0, 0%, 0%, 2%);--color-muted-1: hsl(0, 0%, 0%, 10%);--color-muted-2: hsl(0, 0%, 0%, 4.3%);--color-hint: hsl(0, 0%, 0%, 5.5%);--color-overlay: hsl(0, 0%, 0%, 20%);--color-divider: hsl(0, 0%, 91%);--color-panel-contrast: hsl(0, 0%, 100%);--color-panel-overlay: hsl(0, 0%, 100%, 82%);--color-panel: hsl(0, 0%, 99%);--color-focus: hsl(214, 100%, 29%);--color-selected: hsl(214, 84%, 56%);--color-selected-contrast: hsl(0, 0%, 100%);--color-selection-fill: hsl(210, 100%, 56%, 24%);--color-selection-stroke: hsl(214, 84%, 56%);--color-text-0: hsl(0, 0%, 11%);--color-text-1: hsl(0, 0%, 18%);--color-text-3: hsl(220, 2%, 65%);--color-text-shadow: hsl(0, 0%, 100%);--color-primary: hsl(214, 84%, 56%);--color-warn: hsl(0, 90%, 43%);--color-text: hsl(0, 0%, 0%);--color-laser: hsl(0, 100%, 50%);--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);--shadow-2: 0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, .1), inset 0px 0px 0px 1px var(--color-panel-contrast);--shadow-3: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%), inset 0px 0px 0px 1px var(--color-panel-contrast);--shadow-4: 0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%), 0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--color-panel-contrast)}.tl-theme__dark{--color-accent: hsl(0, 76%, 60%);--color-background: hsl(240, 5%, 8%);--color-brush-fill: hsl(0, 0%, 71%, 5.1%);--color-brush-stroke: hsl(0, 0%, 71%, 25.1%);--color-grid: hsl(0, 0%, 56%);--color-low: hsl(260, 5%, 12.5%);--color-low-border: hsl(207, 10%, 10%);--color-culled: hsl(210, 11%, 19%);--color-muted-none: hsl(0, 0%, 100%, 0%);--color-muted-0: hsl(0, 0%, 100%, 2%);--color-muted-1: hsl(0, 0%, 100%, 10%);--color-muted-2: hsl(0, 0%, 100%, 5%);--color-hint: hsl(0, 0%, 100%, 7%);--color-overlay: hsl(0, 0%, 0%, 50%);--color-divider: hsl(240, 9%, 25%);--color-panel-contrast: hsl(240, 13%, 22%);--color-panel: hsl(220, 8%, 15%);--color-panel-overlay: hsl(210, 11%, 24%, 82%);--color-focus: hsl(217, 76%, 80%);--color-selected: hsl(217, 89%, 61%);--color-selected-contrast: hsl(0, 0%, 100%);--color-selection-fill: hsl(209, 100%, 57%, 20%);--color-selection-stroke: hsl(214, 84%, 56%);--color-text-0: hsl(0, 9%, 94%);--color-text-1: hsl(0, 0%, 85%);--color-text-3: hsl(210, 6%, 45%);--color-text-shadow: hsl(210, 13%, 18%);--color-primary: hsl(214, 84%, 56%);--color-warn: hsl(0, 81%, 66%);--color-text: hsl(210, 17%, 98%);--color-laser: hsl(0, 100%, 50%);--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%), inset 0px 0px 0px 1px var(--color-panel-contrast);--shadow-2: 0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%), inset 0px 0px 0px 1px var(--color-panel-contrast);--shadow-3: 0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%), inset 0px 0px 0px 1px var(--color-panel-contrast)}.tl-counter-scaled{transform:scale(var(--tl-scale));transform-origin:top left;width:calc(100% * var(--tl-zoom));height:calc(100% * var(--tl-zoom))}.tl-container,.tl-container *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;scrollbar-highlight-color:transparent;-webkit-user-select:none;user-select:none;box-sizing:border-box;outline:none}.tl-container a{-webkit-touch-callout:initial}.tl-container:focus-within{outline:1px solid var(--color-low)}input,*[contenteditable],*[contenteditable] *{-webkit-user-select:text}.tl-canvas{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--color-text);z-index:var(--layer-canvas);cursor:var(--tl-cursor);overflow:clip;content-visibility:auto;touch-action:none;contain:strict}.tl-fixed-layer{position:absolute;top:0;left:0;width:100%;height:100%;contain:strict;pointer-events:none}.tl-shapes{position:relative;z-index:var(--layer-shapes)}.tl-overlays{position:relative;z-index:var(--layer-overlays)}.tl-overlays__item{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;transform-origin:top left}.tl-svg-context{position:absolute;top:0;left:0;pointer-events:none}.tl-positioned{position:absolute;top:0;left:0;transform-origin:top left}.tl-background{position:absolute;background-color:var(--color-background);top:0;right:0;bottom:0;left:0;z-index:var(--layer-background)}.tl-grid{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;pointer-events:none;z-index:var(--layer-grid);contain:strict}.tl-grid-dot{fill:var(--color-grid)}.tl-html-layer{position:absolute;top:0;left:0;width:1px;height:1px;contain:layout style size}.tl-brush{stroke-width:calc(var(--tl-scale) * 1px);contain:size layout}.tl-brush__default{stroke:var(--color-brush-stroke);fill:var(--color-brush-fill)}.tl-scribble{stroke-linejoin:round;stroke-linecap:round;pointer-events:none;contain:size layout}.tl-shape{position:absolute;pointer-events:none;overflow:visible;transform-origin:top left;contain:size layout}.tl-shape__culled{position:relative;background-color:var(--color-culled)}.tl-svg-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;stroke-linecap:round;stroke-linejoin:round;transform-origin:top left;overflow:visible}.tl-html-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;stroke-linecap:round;stroke-linejoin:round;transform-origin:top left;color:inherit}.tl-collaborator__scribble{z-index:10}.tl-collaborator__brush{z-index:20}.tl-collaborator__shape-indicator{z-index:30}.tl-user-scribble{z-index:40}.tl-user-brush{z-index:50}.tl-user-indicator__selected{z-index:60}.tl-user-indicator__hovered{z-index:70}.tl-user-handles{z-index:80}.tl-user-snapline{z-index:90}.tl-selection__fg{pointer-events:none;z-index:100}.tl-user-indicator__hint{z-index:110;stroke-width:calc(2.5px * var(--tl-scale))}.tl-collaborator__cursor-hint{z-index:120}.tl-collaborator__cursor{z-index:130}.tl-cursor{overflow:visible}.tl-shape-indicator{transform-origin:top left;fill:none;stroke-width:calc(1.5px * var(--tl-scale));contain:size}.tl-selection__bg{position:absolute;top:0;left:0;transform-origin:top left;background-color:transparent;pointer-events:all}.tl-selection__fg__outline{fill:none;pointer-events:none;stroke:var(--color-selection-stroke);stroke-width:calc(1.5px * var(--tl-scale))}.tl-corner-handle{pointer-events:none;stroke:var(--color-selection-stroke);fill:var(--color-background);stroke-width:calc(1.5px * var(--tl-scale))}.tl-text-handle{pointer-events:none;fill:var(--color-selection-stroke)}.tl-corner-crop-handle,.tl-corner-crop-edge-handle{pointer-events:none;fill:none;stroke:var(--color-selection-stroke)}.tl-mobile-rotate__bg{pointer-events:all;cursor:var(--tl-cursor-grab)}.tl-mobile-rotate__fg{pointer-events:none;stroke:var(--color-selection-stroke);fill:var(--color-background);stroke-width:calc(1.5px * var(--tl-scale))}.tl-transparent{fill:transparent;stroke:transparent}.tl-handle{pointer-events:all}.tl-handle__bg{fill:transparent;stroke:transparent;pointer-events:all;cursor:var(--tl-cursor-grabbing)}.tl-handle__fg{fill:var(--color-selected-contrast);stroke:var(--color-selection-stroke);stroke-width:calc(1.5px * var(--tl-scale));pointer-events:none}.tl-handle__create{opacity:0}.tl-handle__create:hover{opacity:1}.tl-handle__bg:active{fill:none}.tl-handle__bg:hover{cursor:var(--tl-cursor-grab);fill:var(--color-selection-fill)}@media (pointer: coarse){.tl-handle__bg:active{fill:var(--color-selection-fill)}.tl-handle__create{opacity:1}}.tl-image,.tl-video{object-fit:cover;background-size:cover;width:100%;height:100%}.tl-image-container,.tl-embed-container{width:100%;height:100%;pointer-events:all;display:flex;justify-content:center;align-items:center}.tl-image__tg{--scale: min(2, var(--tl-scale)) ;position:absolute;top:calc(var(--scale) * 8px);right:calc(var(--scale) * 8px);font-size:10px;transform-origin:top right;background-color:var(--color-background);padding:2px 4px;border-radius:var(--radius-1)}.tl-collaborator-cursor{position:absolute}.tl-nametag{top:16px;left:13px;width:fit-content;height:fit-content;max-width:120px;padding:3px 6px;white-space:nowrap;position:absolute;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-family:var(--font-body);border-radius:var(--radius-2);color:var(--color-selected-contrast)}.tl-nametag-title{top:-2px;left:13px;width:fit-content;height:fit-content;padding:0 6px;max-width:120px;white-space:nowrap;position:absolute;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-family:var(--font-body);text-shadow:var(--tl-text-outline);color:var(--color-selected-contrast)}.tl-nametag-chat{top:16px;left:13px;width:fit-content;height:fit-content;color:var(--color-selected-contrast);white-space:nowrap;position:absolute;padding:3px 6px;font-size:12px;font-family:var(--font-body);opacity:1;border-radius:var(--radius-2)}.tl-cursor-chat{position:absolute;color:var(--color-selected-contrast);white-space:nowrap;padding:3px 6px;font-size:12px;font-family:var(--font-body);pointer-events:none;z-index:var(--layer-cursor);margin-top:16px;margin-left:13px;opacity:1;border:none;-webkit-user-select:text;user-select:text;border-radius:var(--radius-2)}.tl-cursor-chat .tl-cursor-chat__bubble{padding-right:12px}.tl-cursor-chat::selection{background:var(--color-selected);color:var(--color-selected-contrast);text-shadow:none}.tl-cursor-chat-fade{opacity:.0001;transition:opacity 5s ease-in-out}.tl-cursor-chat::placeholder{color:var(--color-selected-contrast);opacity:.7}@keyframes spinner{to{transform:rotate(360deg)}}.tl-text-shape__wrapper{position:relative;font-weight:400;min-width:1px;padding:0;margin:0;border:none;height:100%;font-variant:normal;font-style:normal;pointer-events:all;white-space:pre-wrap;overflow-wrap:break-word;text-shadow:var(--tl-text-outline)}.tl-text-shape__wrapper[data-align=start]{text-align:left}.tl-text-shape__wrapper[data-align=middle]{text-align:center}.tl-text-shape__wrapper[data-align=end]{text-align:right}.tl-text-shape__wrapper[data-font=draw]{font-family:var(--tl-font-draw)}.tl-text-shape__wrapper[data-font=sans]{font-family:var(--tl-font-sans)}.tl-text-shape__wrapper[data-font=serif]{font-family:var(--tl-font-serif)}.tl-text-shape__wrapper[data-font=mono]{font-family:var(--tl-font-mono)}.tl-text-shape__wrapper[data-isediting=true] .tl-text-content{opacity:0}.tl-text{margin:0;padding:0;border:0px;color:inherit;caret-color:var(--color-text);background:none;border-image:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;font-variant:inherit;font-style:inherit;text-align:inherit;letter-spacing:inherit;text-shadow:inherit;outline:none;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;pointer-events:all;text-rendering:auto;text-transform:none;text-indent:0px;display:inline-block;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;column-count:initial!important;writing-mode:horizontal-tb!important;word-spacing:0px}.tl-text-measure{position:absolute;z-index:999999;top:-9999px;right:-9999px;opacity:0;width:max-content;box-sizing:border-box;pointer-events:none;line-break:normal;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;resize:none;border:none;user-select:none;contain:style paint;-webkit-user-select:none}.tl-text-input,.tl-text-content{position:absolute;top:0;left:0;width:100%;height:100%;min-width:1px;min-height:1px;overflow:visible;outline:none}.tl-text-content{pointer-events:none}.tl-text-input{resize:none;user-select:all;-webkit-user-select:text;overflow:hidden;cursor:var(--tl-cursor-text)}.tl-text-input::selection{background:var(--color-selected);color:var(--color-selected-contrast);text-shadow:none}.tl-snap-line,.tl-snap-point{stroke:var(--color-accent);stroke-width:calc(1px * var(--tl-scale));fill:none}.tl-group{stroke:var(--color-text);stroke-width:calc(1px * var(--tl-scale));opacity:.5}.tl-bookmark__container{width:100%;height:100%;position:relative;border:1px solid var(--color-panel-contrast);background-color:var(--color-panel);border-radius:var(--radius-2);display:flex;flex-direction:column;overflow:hidden}.tl-bookmark__image_container{flex:1;overflow:hidden;border-top-left-radius:var(--radius-1);border-top-right-radius:var(--radius-1);width:100%;height:100%;display:flex;justify-content:flex-end;align-items:flex-start}.tl-bookmark__image_container>.tl-hyperlink-button:after{background-color:var(--color-panel)}.tl-bookmark__placeholder{width:100%;height:100%;background-color:var(--color-muted-2);border-bottom:1px solid var(--color-muted-2)}.tl-bookmark__image{width:100%;height:100%;object-fit:cover;object-position:center}.tl-bookmark__copy_container{background-color:var(--color-muted);padding:var(--space-4);pointer-events:all}.tl-bookmark__heading,.tl-bookmark__description,.tl-bookmark__link{margin:0;width:100%;font-family:inherit}.tl-bookmark__heading{font-size:16px;font-weight:700;padding-bottom:var(--space-2);margin:8px 0}.tl-bookmark__description{font-size:12px;padding-bottom:var(--space-4)}.tl-bookmark__link{font-size:14px;pointer-events:all;z-index:999;overflow:hidden;display:block;color:var(--color-text);text-overflow:ellipsis;text-decoration:none;color:var(--color-text-1);cursor:var(--tl-cursor-pointer)}.tl-bookmark__link:hover{color:var(--color-selected)}.tl-hyperlink-button{background:none;margin:0;position:absolute;top:0;right:0;height:44px;width:44px;display:flex;align-items:center;justify-content:center;z-index:200;font-size:12px;font-weight:400;color:var(--color-text-1);padding:13px;cursor:var(--tl-cursor-pointer);border:none;outline:none;pointer-events:all}.tl-hyperlink-button:after{content:"";z-index:-1;position:absolute;right:6px;bottom:6px;display:block;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:var(--radius-1);background-color:var(--color-background);pointer-events:none}.tl-hyperlink-button:hover{color:var(--color-selected)}.tl-hyperlink-button:focus-visible{color:var(--color-selected)}.tl-hyperlink-button__icon{width:18px;height:18px;background-color:currentColor;pointer-events:none}.tl-hyperlink-button__hidden{display:none}.tl-text-label{display:flex;justify-content:center;align-items:center;color:var(--color-text);text-shadow:var(--tl-text-outline);line-height:inherit;position:absolute;top:0;right:0;bottom:0;left:0;z-index:10}.tl-text-label[data-isediting=true] .tl-text-content{opacity:0}.tl-text-label[data-hastext=false][data-isediting=false]>.tl-text-label__inner{width:40px;height:40px}.tl-text-label[data-hastext=true][data-isediting=false] .tl-text-content{pointer-events:all}.tl-text-label__inner{position:relative;width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:center;pointer-events:none;min-height:auto}.tl-text-label__inner>.tl-text{position:relative;top:0;left:0;padding:16px;height:fit-content;width:fit-content;border-radius:var(--radius-1);max-width:100%;z-index:3}.tl-text-label__inner>.tl-text-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:16px;z-index:4}.tl-text-label[data-textwrap=true]>.tl-text-label__inner{max-width:100%}.tl-text-label[data-isediting=true]{background-color:transparent;min-height:auto}.tl-text-label[data-isediting=true] p{opacity:0}.tl-text-label[data-align=start],.tl-text-label[data-align=start-legacy]{text-align:left}.tl-text-label[data-align=middle],.tl-text-label[data-align=middle-legacy]{text-align:center}.tl-text-label[data-align=end],.tl-text-label[data-align=end-legacy]{text-align:right}.tl-arrow-hint{stroke:var(--color-text-1);fill:none;stroke-linecap:round;overflow:visible}.tl-arrow-label[data-font=draw],.tl-text-label[data-font=draw]{font-family:var(--tl-font-draw)}.tl-arrow-label[data-font=sans],.tl-text-label[data-font=sans]{font-family:var(--tl-font-sans)}.tl-arrow-label[data-font=serif],.tl-text-label[data-font=serif]{font-family:var(--tl-font-serif)}.tl-arrow-label[data-font=mono],.tl-text-label[data-font=mono]{font-family:var(--tl-font-mono)}.tl-arrow-label{position:absolute;top:-1px;left:-1px;width:2px;height:2px;padding:0;display:flex;justify-content:center;align-items:center;color:var(--color-text);text-shadow:var(--tl-text-outline)}.tl-arrow-label[data-isediting=true] p{opacity:0}.tl-arrow-label[data-isediting=true]>.tl-arrow-label__inner{background-color:var(--color-background)}.tl-arrow-label__inner{border-radius:var(--radius-1);box-sizing:content-box;position:relative;height:max-content;width:max-content;pointer-events:all;display:flex;justify-content:center;align-items:center}.tl-arrow-label p,.tl-arrow-label textarea{margin:0;padding:0;border:0px;color:inherit;caret-color:var(--color-text);background:none;border-image:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;font-variant:inherit;font-style:inherit;text-align:inherit;letter-spacing:inherit;text-shadow:inherit;outline:none;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;pointer-events:all;text-rendering:auto;text-transform:none;text-indent:0px;display:inline-block;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;column-count:initial!important;writing-mode:horizontal-tb!important;word-spacing:0px}.tl-arrow-label p{position:relative;height:max-content;z-index:2;padding:4px;overflow:visible}.tl-arrow-label textarea{z-index:3;margin:0;padding:4px;height:100%;width:100%;position:absolute;resize:none;border:0px;user-select:all;-webkit-user-select:text;caret-color:var(--color-text);border-image:none;min-width:4px}.tl-note__container{position:relative;width:100%;height:100%;border-radius:var(--radius-2);box-shadow:var(--shadow-1);overflow:hidden;border-color:currentColor;border-style:solid;border-width:1px}.tl-note__container .tl-text-label{text-shadow:none}.tl-note__scrim{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:var(--color-background);opacity:.28}.tl-loading{background-color:var(--color-background);color:var(--color-text-1);height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-2);font-size:14px;font-weight:500;opacity:0;animation:fade-in .2s ease-in-out forwards;animation-delay:.2s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.tl-frame__body{stroke-width:calc(1px * var(--tl-scale))}.tl-frame__creating{stroke:var(--color-selected);fill:none}.tl-frame-heading{display:flex;align-items:center;position:absolute;transform-origin:0% 100%;overflow:hidden;max-width:100%;min-width:32px;height:auto;font-size:12px;padding-bottom:4px;pointer-events:all}.tl-frame-heading-hit-area{pointer-events:all;transform-origin:0% 100%;display:flex;height:100%;width:100%;align-items:center;border-radius:var(--radius-1);background-color:var(--color-background)}.tl-frame-label{pointer-events:all;overflow:hidden;text-overflow:ellipsis;padding:var(--space-3) var(--space-3);position:relative;font-size:inherit;white-space:pre;border:1px solid transparent}.tl-frame-label__editing{color:transparent;white-space:pre;width:auto;overflow:visible;background-color:var(--color-panel);border-radius:var(--radius-1);border-color:var(--color-selected)}.tl-frame-name-input{position:absolute;border:none;background:none;outline:none;padding:var(--space-3) var(--space-3);top:0;right:0;bottom:0;left:0;font-size:inherit;font-family:inherit;font-weight:inherit;width:100%;color:var(--color-text-1);border-radius:var(--radius-1);user-select:all;-webkit-user-select:text;white-space:pre;cursor:var(--tl-cursor-text)}@media (max-width: 600px){.tl-frame-heading{font-size:16px}}.tl-embed{border:none;border-radius:var(--radius-2)}.tl-shape-error-boundary{width:100%;height:100%;background-color:var(--color-muted-1);border-width:calc(1px * var(--tl-scale));border-color:var(--color-muted-1);border-style:solid;border-radius:calc(var(--radius-1) * var(--tl-scale));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:left;position:relative;pointer-events:all;overflow:hidden;padding:var(--space-2)}.tl-shape-error-boundary:before{transform:scale(var(--tl-scale));content:"Error";font-size:12px;font-family:inherit;color:var(--color-text-0)}.tl-error-boundary{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background-color:var(--color-background);color:var(--color-text-1);position:absolute;z-index:600}.tl-error-boundary__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:500;background-color:var(--color-overlay)}.tl-error-boundary__content *{user-select:all;-webkit-user-select:text;pointer-events:all}.tl-error-boundary__canvas{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.tl-error-boundary__canvas:after{content:" ";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:600;pointer-events:all}.tl-error-boundary__content{width:fit-content;height:fit-content;max-width:100%;width:400px;max-height:100%;background-color:var(--color-panel);padding:16px;border-radius:16px;box-shadow:var(--shadow-2);font-size:14px;font-weight:400;display:flex;flex-direction:column;overflow:auto;z-index:600;gap:12px}.tl-error-boundary__content__expanded{width:600px}.tl-error-boundary__content h2{font-size:16px;margin:0;font-weight:500}.tl-error-boundary__content p{line-height:1.5;margin:0}.tl-error-boundary__content pre{background-color:var(--color-muted-2);padding:var(--space-5);border-radius:var(--radius-2);overflow:auto;font-size:12px;max-height:320px}.tl-error-boundary__content button{background:none;border:none;font-family:inherit;font-size:14px;font-weight:500;padding:var(--space-4);border-radius:var(--radius-3);cursor:var(--tl-cursor-pointer);color:inherit;background-color:transparent}.tl-error-boundary__content button:hover{background-color:var(--color-low)}.tl-error-boundary__content a{color:var(--color-text-1);font-weight:500;text-decoration:none}.tl-error-boundary__content a:hover{color:var(--color-text-1)}.tl-error-boundary__content__error{position:relative}.tl-error-boundary__content__error button{position:absolute;top:var(--space-2);right:var(--space-2);font-size:12px;padding:var(--space-2) var(--space-3);background-color:var(--color-panel);border-radius:var(--radius-1)}.tl-error-boundary__content__actions{display:flex;justify-content:space-between;gap:var(--space-4);margin:0 0 0 -4px}.tl-error-boundary__content__actions__group{display:flex;gap:var(--space-4)}.tl-error-boundary__content .tl-error-boundary__reset{color:var(--color-warn)}.tl-error-boundary__content .tl-error-boundary__refresh{background-color:var(--color-primary);color:var(--color-selected-contrast)}.tl-error-boundary__content .tl-error-boundary__refresh:hover{background-color:var(--color-primary);opacity:.9}.tl-hidden{opacity:0;pointer-events:none}.debug__ui-logger{position:absolute;top:62px;left:16px;color:#555;font-size:12px;font-family:monospace}.tl-container{--layer-panels: 300;--layer-menus: 400;--layer-overlays: 500;--layer-toasts: 650;--layer-cursor: 700}.tlui-button{position:relative;height:40px;min-width:40px;padding:0 12px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:transparent;color:currentColor;cursor:pointer;pointer-events:all;font-weight:inherit;font-family:inherit;text-rendering:optimizeLegibility;font-size:12px;gap:0px;color:var(--color-text-1);text-shadow:1px 1px var(--color-text-shadow)}.tlui-button:disabled{color:var(--color-text-3);text-shadow:none}.tlui-button:disabled .tlui-kbd{color:var(--color-text-3)}.tlui-button>*{position:relative;z-index:1}.tlui-button__label{flex-grow:2;text-align:left}.tlui-button:focus-visible:not(:hover){outline:1px solid var(--color-selected);outline-offset:-4px;border-radius:var(--radius-3)}.tlui-button:after{display:block;content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;background-color:transparent;border-radius:var(--radius-2)}.tlui-button[aria-expanded=true]:after{background-color:var(--color-muted-0);opacity:1}@media (hover: hover){.tlui-button:after{background-color:var(--color-muted-2);opacity:0}.tlui-button:not(:disabled):hover:after{opacity:1}}.tlui-button__low{border-radius:var(--radius-3);background-color:var(--color-low)}@media (hover: hover){.tlui-button__low:after{background-color:var(--color-muted-2)}}.tlui-button__primary{color:var(--color-primary)}.tlui-button__danger{color:var(--color-warn);text-shadow:none}@media (hover: hover){.tlui-button__primary:not(:disabled,:focus-visible):hover{color:var(--color-primary)}.tlui-button__danger:not(:disabled,:focus-visible):hover{color:var(--color-warn);text-shadow:none}}.tlui-button__panel{position:relative}.tlui-button__icon{height:40px;width:40px;min-height:40px;min-width:40px;padding:0}.tlui-button__icon-left{margin-right:var(--space-2)}.tlui-button__icon[data-state=hinted]:after{background:var(--color-hint);opacity:1}.tlui-button__icon[data-state=hinted]:not(:disabled,:focus-visible):active:after{background:var(--color-hint);opacity:1}@media (hover: hover){.tlui-button__icon:after{top:4px;right:4px;bottom:4px;left:4px;border-radius:var(--radius-2)}.tlui-button__icon[data-state=hinted]:not(:disabled,:focus-visible):hover:after{background:var(--color-hint)}}.tlui-button__menu{height:40px;min-height:40px;min-width:128px;width:100%;gap:8px;margin:-4px 0}.tlui-button__menu:nth-child(1){margin-top:0}.tlui-button__menu:nth-last-child(1){margin-bottom:0}@media (hover: hover){.tlui-button__menu:after{top:4px;right:4px;bottom:4px;left:4px;border-radius:var(--radius-2)}}.tlui-button__checkbox{padding-left:8px}.tlui-button__checkbox__indicator{width:15px;height:15px}.tlui-toolbar__lock-button{position:absolute;top:4px;right:0;pointer-events:all;height:40px;width:40px;min-width:0px;border-radius:var(--radius-2)}.tlui-toolbar__lock-button:after{top:4px;right:4px;bottom:4px;left:4px}.tlui-button__tool{position:relative;height:48px;width:48px;margin-left:-2px;margin-right:-2px}.tlui-button__tool:nth-of-type(1){margin-left:0}.tlui-button__tool:nth-last-of-type(1){margin-right:0}@media (hover: hover){.tlui-button__tool:after{top:4px;right:4px;bottom:4px;left:4px;border-radius:8px}.tlui-button__tool[data-state=selected]:not(:disabled,:focus-visible):hover{color:var(--color-selected-contrast)}}.tlui-button__tool[data-state=selected]{color:var(--color-selected-contrast)}.tlui-button__tool[data-state=selected]:not(:disabled,:focus-visible):active{color:var(--color-selected-contrast)}.tlui-button__tool[data-state=selected]:not(:disabled):after{background:var(--color-selected);opacity:1}.tlui-button__help{height:32px;width:32px;padding:0;min-width:32px;border-radius:100%;background-color:var(--color-low);border:1px solid var(--color-low-border)}@media (hover: hover){.tlui-button__help:after{background-color:var(--color-muted-2);border-radius:100%;top:4px;right:4px;bottom:4px;left:4px}}.tlui-buttons__horizontal{display:flex;flex-direction:row}.tlui-buttons__horizontal>*{margin-left:-2px;margin-right:-2px}.tlui-buttons__horizontal>*:nth-child(1){margin-left:0}.tlui-buttons__horizontal>*:nth-last-child(1){margin-right:0}.tlui-buttons__grid{display:grid;grid-template-columns:repeat(4,auto);grid-auto-flow:row;overflow:hidden}.tlui-buttons__grid>.tlui-button{margin:-2px}.tlui-buttons__grid>.tlui-button:nth-of-type(4n){margin-right:0}.tlui-buttons__grid>.tlui-button:nth-of-type(4n-3){margin-left:0}.tlui-buttons__grid>.tlui-button:nth-of-type(-n+4){margin-top:0}.tlui-buttons__grid>.tlui-button:nth-last-of-type(-n+4){margin-bottom:0}.tlui-zoom-menu__button__pct{width:60px;min-width:60px;text-align:center}@media (max-width: 640px){.tlui-button__tool{height:48px;width:44px}.tlui-button__tool>.tlui-icon{height:16px;width:16px}.tlui-kbd{visibility:hidden}.tlui-menu__group .tlui-button__icon-left{display:none}}.tlui-layout{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0px,1fr) auto;grid-auto-rows:auto;height:100%;max-height:100%;overflow:clip;pointer-events:none;-webkit-user-select:none;user-select:none;contain:strict;z-index:var(--layer-panels);-webkit-transform:translate3d(0,0,0);--sab: env(safe-area-inset-bottom)}.tlui-layout__top{grid-column:1;grid-row:1;display:flex;min-width:0px;justify-content:space-between}.tlui-layout__top__left{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;height:100%;flex:0 1 0}.tlui-layout__top__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;height:100%;flex:0 0 auto;min-width:0px}.scrollable,.scrollable *{pointer-events:all;touch-action:auto;overscroll-behavior:none}.tlui-helper-buttons{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:min-content;gap:var(--space-3);margin:var(--space-2) var(--space-3);white-space:nowrap;pointer-events:none;z-index:var(--layer-panels)}.tlui-icon{flex-shrink:0;width:18px;height:18px;background-color:currentColor}.tlui-icon__small{width:15px;height:15px}.tlui-slider{position:relative;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.tlui-slider__container{width:100%;padding:0px var(--space-4)}.tlui-slider__track{position:relative;flex-grow:1;height:44px;cursor:pointer}.tlui-slider__track:after{display:block;position:absolute;top:calc(50% - 2px);content:"";height:3px;width:100%;background-color:var(--color-muted-1);border-radius:14px}.tlui-slider__range{position:absolute;top:calc(50% - 2px);left:0;height:3px;background-color:var(--color-selected);border-radius:14px}.tlui-slider__thumb{all:unset;cursor:grab;display:block;width:18px;height:18px;position:relative;top:-1px;background-color:var(--color-panel);border-radius:999px;box-shadow:inset 0 0 0 2px var(--color-text-1)}.tlui-slider__thumb:active{cursor:grabbing;box-shadow:inset 0 0 0 2px var(--color-text-1),var(--shadow-1)}.tlui-slider__thumb:focus-visible{box-shadow:inset 0 0 0 2px var(--color-focus)}.tlui-kbd{font-family:inherit;font-size:11px;line-height:11px;display:grid;justify-items:center;grid-auto-flow:column;grid-template-columns:auto;grid-auto-columns:minmax(1em,auto);gap:1px;align-self:bottom;color:var(--color-text-1);margin-left:var(--space-4)}.tlui-kbd>span{width:100%;text-align:center;display:inline;margin:0;padding:2px;border-radius:2px}.tlui-kbd:not(:last-child){margin-right:var(--space-2)}.tlui-focus-button{z-index:var(--layer-panels);pointer-events:all}.tlui-popover{position:relative;display:flex;align-content:stretch}.tlui-popover__content{position:relative;max-height:75vh;margin:0;border:none;border-radius:var(--radius-3);background-color:var(--color-panel);box-shadow:var(--shadow-3);z-index:var(--layer-menus);overflow:hidden;overflow-y:auto;touch-action:auto;overscroll-behavior:none;scrollbar-width:none;-ms-overflow-style:none}.tlui-debug-panel{background-color:var(--color-low);width:100%;display:grid;align-items:center;grid-template-columns:1fr auto auto;justify-content:space-between;padding-left:var(--space-4);border-top:1px solid var(--color-background);font-size:12px;color:var(--color-text-1);z-index:var(--layer-panels);pointer-events:all}.tlui-debug-panel__current-state{white-space:nowrap}.tlui-menu-zone{position:relative;z-index:var(--layer-panels);width:fit-content;border-right:2px solid var(--color-background);border-bottom:2px solid var(--color-background);border-bottom-right-radius:var(--radius-4);background-color:var(--color-low)}.tlui-menu-zone *[data-state=open]:after{background:linear-gradient(180deg,rgba(144,144,144,0) 0%,var(--color-muted-2) 100%)}.tlui-style-panel__wrapper{box-shadow:var(--shadow-2);border-radius:var(--radius-3);pointer-events:all;background-color:var(--color-panel);height:fit-content;max-height:100%;margin:8px;touch-action:auto;overscroll-behavior:none;overflow-y:auto;overflow-x:hidden;color:var(--color-text)}.tlui-style-panel{position:relative;z-index:var(--layer-panels);pointer-events:all;width:148px;max-width:148px}.tlui-style-panel::-webkit-scrollbar{display:none}.tlui-style-panel .tlui-button.select{width:100%}.tlui-style-panel__section{display:flex;position:relative;flex-direction:column}.tlui-style-panel__section:nth-of-type(n+2):not(:last-child){border-bottom:1px solid var(--color-divider)}.tlui-style-panel__section:empty{display:none}.tlui-style-panel__section__common:not(:only-child){margin-bottom:7px;border-bottom:1px solid var(--color-divider)}.tlui-style-panel__row{display:flex}.tlui-style-panel__row__extra-button{margin-left:-2px}.tlui-style-panel__double-select-picker{display:flex;grid-template-columns:1fr auto;align-items:center;padding-left:var(--space-4);color:var(--color-text-1);font-size:12px}.tlui-style-panel__double-select-picker-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:2;max-width:100%}.tlui-style-panel__section *[data-state=open]:after{background:var(--color-muted-0)}.tlui-input{background:none;margin:0;position:relative;z-index:1;height:40px;max-height:40px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:12px;font-weight:inherit;color:var(--color-text-1);padding:var(--space-4);padding-left:0;border:none;outline:none;text-overflow:ellipsis;width:100%;user-select:all;text-rendering:optimizeLegibility;-webkit-user-select:auto!important}.tlui-input__wrapper{width:100%;height:44px;display:flex;align-items:center;gap:var(--space-4);color:var(--color-text)}.tlui-input__wrapper>.tlui-icon{flex-shrink:0}@media (max-width: 600px){@supports (-webkit-touch-callout: none){.tlui-input{font-size:16px}}}.tlui-dialog__overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--layer-overlays);background-color:var(--color-overlay);pointer-events:all;animation:fadeIn .12s ease-out;display:grid;place-items:center;overflow-y:auto}.tlui-dialog__content{display:flex;flex-direction:column;position:relative;cursor:default;background-color:var(--color-panel);box-shadow:var(--shadow-3);border-radius:var(--radius-3);font-size:12px;overflow:hidden;min-width:300px;max-width:80vw;max-height:80vh}.tlui-dialog__header{position:relative;display:flex;align-items:center;flex:0;z-index:999;padding-left:var(--space-4);color:var(--color-text);height:44px}.tlui-dialog__header__title{flex:1;font-weight:inherit;font-size:12px;margin:0;color:var(--color-text-1)}.tlui-dialog__header__close{justify-self:flex-end}.tlui-dialog__body{padding:var(--space-4) var(--space-4);flex:0 1;overflow-y:auto;overflow-x:hidden;color:var(--color-text-1);user-select:all;-webkit-user-select:text}.tlui-dialog__footer{position:relative;z-index:999}.tlui-dialog__footer__actions{display:flex;align-items:center;justify-content:flex-end}.tlui-dialog__footer__actions>.tlui-button:nth-last-child(n+2){margin-right:-4px}.tlui-toolbar{grid-column:1 / span 3;grid-row:1;display:flex;align-items:center;justify-content:center;flex-grow:2;padding-bottom:calc(var(--space-3) + var(--sab))}.tlui-toolbar__inner{position:relative;width:fit-content;display:flex;gap:var(--space-3);align-items:flex-end}.tlui-toolbar__left{width:fit-content}.tlui-toolbar__extras{position:relative;z-index:1;width:100%;pointer-events:none;top:6px;height:48px}.tlui-toolbar__extras__controls{display:flex;position:relative;flex-direction:row;z-index:1;background-color:var(--color-low);border-top-left-radius:var(--radius-4);border-top-right-radius:var(--radius-4);border:2px solid var(--color-background);margin-left:8px;margin-right:0;pointer-events:all;width:fit-content}.tlui-toolbar__tools{display:flex;flex-direction:row;background-color:var(--color-low);border-radius:var(--radius-4);z-index:var(--layer-panels);pointer-events:all;position:relative;align-items:center;background:var(--color-panel);box-shadow:var(--shadow-2)}.tlui-toolbar__overflow{width:40px}@media (max-width: 640px){.tlui-toolbar__overflow{width:32px;padding:0}.tlui-toolbar *[data-state=open]:after{background:linear-gradient(0deg,rgba(144,144,144,0) 0%,var(--color-muted-2) 100%)}}.tlui-help-menu{pointer-events:all;position:absolute;bottom:var(--space-2);right:var(--space-2);z-index:var(--layer-panels);border:2px solid var(--color-background);border-radius:100%}.tlui-context-menu__move-to-page__name{max-width:min(300px,35vw);overflow:hidden;text-overflow:ellipsis}.tlui-context-menu__move-to-page__name[data-disabled]{color:var(--color-text-3);pointer-events:none}.tlui-menu{z-index:var(--layer-menus);height:fit-content;width:fit-content;max-height:80vh;border-radius:var(--radius-3);pointer-events:all;touch-action:auto;overflow-y:auto;overscroll-behavior:none;background-color:var(--color-panel);box-shadow:var(--shadow-3)}.tlui-menu::-webkit-scrollbar{display:none}.tlui-menu__arrow{position:relative;top:-1px;fill:var(--color-panel);stroke:var(--color-panel-contrast);stroke-width:1px}.tlui-menu__group[data-size=large]{min-width:initial}.tlui-menu__group[data-size=medium]{min-width:144px}.tlui-menu__group[data-size=small]{min-width:96px}.tlui-menu__group[data-size=tiny]{min-width:0px}.tlui-menu__group+.tlui-menu__group{border-top:1px solid var(--color-divider)}.tlui-menu__submenu__trigger[data-state=open]:not(:hover):after{border-radius:var(--radius-1);background:linear-gradient(90deg,rgba(144,144,144,0) 0%,var(--color-muted-2) 100%)}.tlui-menu__submenu__trigger[data-direction=left][data-state=open]:not(:hover):after{border-radius:var(--radius-1);background:linear-gradient(270deg,rgba(144,144,144,0) 0%,var(--color-muted-2) 100%)}.tlui-actions-menu{max-height:calc(100vh - 150px)}.tlui-toast__viewport{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;display:flex;align-items:flex-end;justify-content:flex-end;flex-direction:column;gap:var(--space-3);pointer-events:none;padding:0px var(--space-3) 64px 0px;z-index:var(--layer-toasts)}.tlui-toast__viewport>*{pointer-events:all}.tlui-toast__icon{padding-top:var(--space-4);padding-left:var(--space-4);color:var(--color-text-1)}.tlui-toast__container{min-width:200px;display:flex;flex-direction:row;background-color:var(--color-panel);box-shadow:var(--shadow-2);border-radius:var(--radius-3);font-size:12px}.tlui-toast__main{flex-grow:2;max-width:280px}.tlui-toast__content{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.tlui-toast__title{font-weight:700;color:var(--color-text-1)}.tlui-toast__description{color:var(--color-text-1);padding:var(--space-3);margin:0;padding:0}.tlui-toast__icon+.tlui-toast__main>.tlui-toast__actions{padding-left:0}.tlui-toast__actions{display:flex;flex-direction:row;justify-content:flex-start;margin-left:0}.tlui-toast__close{align-self:flex-end;flex-shrink:0}@media (prefers-reduced-motion: no-preference){.tlui-toast__container[data-state=open]{animation:slide-in .2s cubic-bezier(.785,.135,.15,.86)}.tlui-toast__container[data-state=closed]{animation:hide .1s ease-in}.tlui-toast__container[data-swipe=move]{transform:translate(var(--radix-toast-swipe-move-x))}.tlui-toast__container[data-swipe=cancel]{transform:translate(0);transition:transform .2s ease-out}.tlui-toast__container[data-swipe=end]{animation:swipe-out .1s ease-out}}.tlui-layout__bottom{grid-row:2}.tlui-layout__bottom__main{width:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}.tlui-navigation-zone{display:flex;width:min-content;flex-direction:column;z-index:var(--layer-panels);pointer-events:all;position:absolute;left:0;bottom:0}.tlui-navigation-zone:before{content:"";display:block;position:absolute;z-index:-1;top:-2px;right:-2px;bottom:0;left:0;border-radius:0;border-top:2px solid var(--color-background);border-right:2px solid var(--color-background);border-top-right-radius:var(--radius-4);background-color:var(--color-low)}.tlui-navigation-zone__toggle .tlui-icon{opacity:.24}.tlui-navigation-zone__toggle:active .tlui-icon{opacity:1}@media (hover: hover){.tlui-navigation-zone__toggle:hover .tlui-icon{opacity:1}}.tlui-minimap{width:100%;height:96px;min-height:96px;overflow:hidden;padding:var(--space-3);padding-top:0}.tlui-minimap__canvas{position:relative;width:100%;height:100%}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes slide-in{0%{transform:translate(calc(100% + var(--space-3)))}to{transform:translate(0)}}@keyframes swipe-out{0%{transform:translate(var(--radix-toast-swipe-end-x))}to{transform:translate(calc(100% + var(--space-3)))}}.tlui-page-menu__wrapper{position:relative;display:flex;flex-direction:column;width:220px;height:fit-content;max-height:50vh}.tlui-page-menu__trigger{width:128px}.tlui-page-menu__trigger>span{flex-grow:2;margin-right:var(--space-4)}.tlui-page-menu__header{display:flex;flex-direction:row;align-items:center;width:100%;height:40px;padding-left:var(--space-4);border-bottom:1px solid var(--color-divider)}.tlui-page-menu__header>.tlui-button:nth-of-type(1){margin-right:-4px}.tlui-page-menu__header__title{color:var(--color-text);font-size:12px;flex-grow:2}.tlui-page-menu__name{flex-grow:2;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tlui-page-menu__list{position:relative;flex-direction:column;max-height:100%;overflow-x:hidden;overflow-y:auto;touch-action:auto}.tlui-page-menu__item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0px}.tlui-page-menu__item:nth-of-type(n+2){margin-top:-4px}.tlui-page-menu__item__button{width:100%}.tlui-page-menu__item__button:not(:only-child){flex-grow:2;margin-right:-2px}.tlui-page-menu__item__button>span{display:block;flex-grow:2;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tlui-page-menu__item__button__checkbox{padding-left:35px}.tlui-page-menu__item__button__check{position:absolute;left:0;width:24px;padding-left:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-text)}.tlui-page_menu__item__sortable{position:absolute;top:0;left:0;width:100%;height:fit-content;display:flex;flex-direction:row;align-items:center;overflow:hidden;z-index:1}.tlui-page_menu__item__sortable__title{flex:1}.tlui-page_menu__item__sortable__title>.tlui-input__wrapper{height:100%}.tlui-page_menu__item__sortable:focus-within{z-index:10}.tlui-page_menu__item__sortable__handle{touch-action:none;width:32px;min-width:0px;height:40px;cursor:grab;color:var(--color-text-3);flex-shrink:0;margin-right:-9px}.tlui-page_menu__item__sortable__handle:active{cursor:grabbing}.tlui-page-menu__item__input{margin-left:12px;height:100%}.tlui-page_menu__item__submenu{pointer-events:all;flex:0;cursor:pointer;display:none;margin:0 0 0 -2px}.tlui-page_menu__item__submenu[data-isediting=true]{display:block}@media (hover: hover){.tlui-page_menu__item__submenu{opacity:0;display:block}.tlui-page_menu__item__submenu:hover,.tlui-page-menu__item:focus-within>.tlui-page_menu__item__submenu,.tlui-page_menu__item__sortable:focus-within>.tlui-page_menu__item__submenu{opacity:1}}.tlui-edit-link-dialog{display:flex;flex-direction:column;gap:var(--space-4);color:var(--color-text)}.tlui-edit-link-dialog__input{background-color:var(--color-muted-2);flex-grow:2;border-radius:var(--radius-2);padding:0px var(--space-4)}.tlui-embed__spacer{flex-grow:2;min-height:0px;margin-left:calc(-1 * var(--space-4));margin-top:calc(-1 * var(--space-4));pointer-events:none}.tlui-embed-dialog__list{display:flex;flex-direction:column;padding-bottom:var(--space-5)}.tlui-embed-dialog__item__image{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-size:contain;background-repeat:no-repeat;background-position:center center}.tlui-embed-dialog__enter{display:flex;flex-direction:column;gap:var(--space-4);color:var(--color-text-1)}.tlui-embed-dialog__input{background-color:var(--color-muted-2);flex-grow:2;border-radius:var(--radius-2);padding:0px var(--space-4)}.tlui-embed-dialog__warning{color:var(--color-warn);text-shadow:none}.tlui-embed-dialog__instruction__link{display:flex;gap:var(--space-1);margin-top:var(--space-4)}.tlui-embed-dialog__enter a{color:var(--color-text-1)}.tlui-following-indicator{display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-width:2px;border-style:solid;z-index:var(--layer-following-indicator);pointer-events:none}.tlui-offline-indicator{display:flex;flex-direction:row;gap:var(--space-3);color:var(--color-text);background-color:var(--color-low);border:3px solid var(--color-background);padding:0px var(--space-5);height:42px;align-items:center;justify-content:center;border-radius:99px;opacity:0;animation:fade-in;animation-duration:.12s;animation-delay:2s;animation-fill-mode:forwards}.tlui-shortcuts-dialog__header{border-bottom:1px solid var(--color-divider)}.tlui-shortcuts-dialog__body{position:relative;columns:1;column-gap:var(--space-9);pointer-events:all;touch-action:auto}@media (min-width: 475px){.tlui-shortcuts-dialog__body{columns:2;column-gap:var(--space-9)}}@media (min-width: 960px){.tlui-shortcuts-dialog__body{columns:3;column-gap:var(--space-9)}}.tlui-shortcuts-dialog__group{break-inside:avoid-column;padding-bottom:var(--space-6)}.tlui-shortcuts-dialog__group__title{font-size:inherit;font-weight:inherit;margin:0;color:var(--color-text-3);height:32px;display:flex;align-items:center}.tlui-shortcuts-dialog__group__content{display:flex;flex-direction:column;color:var(--color-text-1)}.tlui-shortcuts-dialog__key-pair{display:flex;gap:var(--space-4);align-items:center;justify-content:space-between;height:32px}.tlui-shortcuts-dialog__key-pair__key{flex:1;font-size:12px}