npm - mesurer - Versions diffs - 0.2.2 → 0.2.3 - Mend

mesurer 0.2.2 → 0.2.3

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 (8) hide show

package/CHANGELOG.md +5 -0
package/README.md +2 -2
package/dist/chunk-DBVWPZ7G.js +272 -0
package/dist/index.cjs +1156 -581
package/dist/index.js +688 -547
package/dist/screen-recording-gif-J4EOWLWH.js +155 -0
package/dist/styles.css +1 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,14 @@
+import {
+  correctWebmDuration,
+  encodeGifClip,
+  isFullClipExport,
+  readBlobVideoDuration,
+  reencodeVideoClip,
+  requestDisplayMediaStream,
+  resolveRecordingDuration,
+  seekVideoElement
+} from "./chunk-DBVWPZ7G.js";
 // runtime/style-inject.ts
 var MESURER_STYLE_ID = "mesurer-styles";
 var injectedTargets = /* @__PURE__ */ new WeakSet();
@@ -48,7 +59,7 @@ function ensureMesurerStyles(cssText, target) {
 }
 // styles.generated.ts
-var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--msr-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--msr-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--msr-color-red-50:oklch(97.1% .013 17.38);--msr-color-red-200:oklch(88.5% .062 18.334);--msr-color-red-600:oklch(57.7% .245 27.325);--msr-color-red-700:oklch(50.5% .213 27.518);--msr-color-black:#000;--msr-color-white:#fff;--msr-spacing:.25rem;--msr-text-xs:.75rem;--msr-text-xs--line-height:calc(1 / .75);--msr-text-sm:.875rem;--msr-text-sm--line-height:calc(1.25 / .875);--msr-font-weight-normal:400;--msr-font-weight-medium:500;--msr-font-weight-semibold:600;--msr-radius-sm:.25rem;--msr-radius-md:.375rem;--msr-radius-lg:.5rem;--msr-radius-xl:.75rem;--msr-ease-out:cubic-bezier(0, 0, .2, 1);--msr-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--msr-aspect-video:16 / 9;--msr-default-transition-duration:.15s;--msr-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--msr-default-font-family:var(--msr-font-sans);--msr-default-mono-font-family:var(--msr-font-mono);--msr-radius-control:5px;--msr-radius-wide-card:13px;--msr-shadow-toolbar:drop-shadow(0 0 .4px #00000038) drop-shadow(0 6px 18px #00000008) drop-shadow(0 3px 9px #0000000f) drop-shadow(0 1px 1px #0000000f);--msr-shadow-floating:0 0 0 .4px #00000038, 0 6px 18px #00000008, 0 3px 9px #0000000f, 0 1px 1px #0000000f;--msr-color-ink-50:#f8fafc;--msr-color-ink-100:#f1f5f9;--msr-color-ink-200:#e2e8f0;--msr-color-ink-300:#cbd5e1;--msr-color-ink-500:#64748b;--msr-color-ink-700:#334155;--msr-color-ink-900:#18181b}}@layer base{.mesurer-root{font-family:var(--msr-font-sans);font-size:12px;line-height:1.5}.mesurer-root button,.mesurer-root input,.mesurer-root select,.mesurer-root textarea{font-family:inherit;font-size:inherit;line-height:inherit}.mesurer-root input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}.mesurer-root input[type=search]::-webkit-search-decoration{appearance:none;display:none}.mesurer-root input[type=search]::-moz-search-clear{appearance:none;display:none}.mesurer-root input[type=search]::-ms-clear{appearance:none;display:none}:where(.mesurer-root,.mesurer-root *){--tw-border-style:solid;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-inset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;border:0 solid}.mesurer-root button,.mesurer-root input,.mesurer-root select,.mesurer-root textarea{appearance:none;font:inherit;color:inherit;letter-spacing:inherit;background-color:#0000;padding:0}}@layer components;@layer utilities{.msr\\:pointer-events-auto{pointer-events:auto}.msr\\:pointer-events-none{pointer-events:none}.msr\\:absolute{position:absolute}.msr\\:fixed{position:fixed}.msr\\:relative{position:relative}.msr\\:inset-0{inset:calc(var(--msr-spacing) * 0)}.msr\\:inset-x-0{inset-inline:calc(var(--msr-spacing) * 0)}.msr\\:inset-y-0{inset-block:calc(var(--msr-spacing) * 0)}.msr\\:top-0{top:calc(var(--msr-spacing) * 0)}.msr\\:top-0\\.5{top:calc(var(--msr-spacing) * .5)}.msr\\:top-1\\.5{top:calc(var(--msr-spacing) * 1.5)}.msr\\:top-1\\/2{top:50%}.msr\\:top-1\\/3{top:33.3333%}.msr\\:top-2\\/3{top:66.6667%}.msr\\:top-9{top:calc(var(--msr-spacing) * 9)}.msr\\:top-\\[18px\\]{top:18px}.msr\\:top-full{top:100%}.msr\\:right-0{right:calc(var(--msr-spacing) * 0)}.msr\\:right-1{right:calc(var(--msr-spacing) * 1)}.msr\\:right-1\\.5{right:calc(var(--msr-spacing) * 1.5)}.msr\\:right-2{right:calc(var(--msr-spacing) * 2)}.msr\\:right-\\[8px\\]{right:8px}.msr\\:bottom-0{bottom:calc(var(--msr-spacing) * 0)}.msr\\:bottom-1\\.5{bottom:calc(var(--msr-spacing) * 1.5)}.msr\\:bottom-4{bottom:calc(var(--msr-spacing) * 4)}.msr\\:bottom-full{bottom:100%}.msr\\:left-0{left:calc(var(--msr-spacing) * 0)}.msr\\:left-1\\.5{left:calc(var(--msr-spacing) * 1.5)}.msr\\:left-1\\/2{left:50%}.msr\\:left-1\\/3{left:33.3333%}.msr\\:left-2\\/3{left:66.6667%}.msr\\:left-\\[8px\\]{left:8px}.msr\\:left-\\[18px\\]{left:18px}.msr\\:left-full{left:100%}.msr\\:z-10{z-index:10}.msr\\:z-20{z-index:20}.msr\\:z-30{z-index:30}.msr\\:z-40{z-index:40}.msr\\:z-50{z-index:50}.msr\\:z-80{z-index:80}.msr\\:z-100{z-index:100}.msr\\:z-\\[1\\]{z-index:1}.msr\\:z-\\[2\\]{z-index:2}.msr\\:z-\\[25\\]{z-index:25}.msr\\:z-\\[60\\]{z-index:60}.msr\\:z-\\[70\\]{z-index:70}.msr\\:z-\\[71\\]{z-index:71}.msr\\:z-\\[80\\]{z-index:80}.msr\\:z-\\[85\\]{z-index:85}.msr\\:z-\\[90\\]{z-index:90}.msr\\:z-\\[95\\]{z-index:95}.msr\\:z-\\[100\\]{z-index:100}.msr\\:z-\\[101\\]{z-index:101}.msr\\:col-span-2{grid-column:span 2/span 2}.msr\\:m-0{margin:calc(var(--msr-spacing) * 0)}.msr\\:mx-auto{margin-inline:auto}.msr\\:my-1{margin-block:calc(var(--msr-spacing) * 1)}.msr\\:mt-0\\.5{margin-top:calc(var(--msr-spacing) * .5)}.msr\\:mt-1{margin-top:calc(var(--msr-spacing) * 1)}.msr\\:mt-2{margin-top:calc(var(--msr-spacing) * 2)}.msr\\:mt-3{margin-top:calc(var(--msr-spacing) * 3)}.msr\\:mt-4{margin-top:calc(var(--msr-spacing) * 4)}.msr\\:mb-1{margin-bottom:calc(var(--msr-spacing) * 1)}.msr\\:mb-2{margin-bottom:calc(var(--msr-spacing) * 2)}.msr\\:-ml-1{margin-left:calc(var(--msr-spacing) * -1)}.msr\\:ml-1{margin-left:calc(var(--msr-spacing) * 1)}.msr\\:ml-auto{margin-left:auto}.msr\\:box-border{box-sizing:border-box}.msr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.msr\\:block{display:block}.msr\\:flex{display:flex}.msr\\:grid{display:grid}.msr\\:inline-flex{display:inline-flex}.msr\\:size-1\\.5{width:calc(var(--msr-spacing) * 1.5);height:calc(var(--msr-spacing) * 1.5)}.msr\\:size-2{width:calc(var(--msr-spacing) * 2);height:calc(var(--msr-spacing) * 2)}.msr\\:size-3{width:calc(var(--msr-spacing) * 3);height:calc(var(--msr-spacing) * 3)}.msr\\:size-4{width:calc(var(--msr-spacing) * 4);height:calc(var(--msr-spacing) * 4)}.msr\\:size-5{width:calc(var(--msr-spacing) * 5);height:calc(var(--msr-spacing) * 5)}.msr\\:size-6{width:calc(var(--msr-spacing) * 6);height:calc(var(--msr-spacing) * 6)}.msr\\:size-7{width:calc(var(--msr-spacing) * 7);height:calc(var(--msr-spacing) * 7)}.msr\\:size-8{width:calc(var(--msr-spacing) * 8);height:calc(var(--msr-spacing) * 8)}.msr\\:size-\\[10px\\]{width:10px;height:10px}.msr\\:size-\\[18px\\]{width:18px;height:18px}.msr\\:size-full{width:100%;height:100%}.msr\\:h-0{height:calc(var(--msr-spacing) * 0)}.msr\\:h-1\\.5{height:calc(var(--msr-spacing) * 1.5)}.msr\\:h-2{height:calc(var(--msr-spacing) * 2)}.msr\\:h-2\\.5{height:calc(var(--msr-spacing) * 2.5)}.msr\\:h-3{height:calc(var(--msr-spacing) * 3)}.msr\\:h-5{height:calc(var(--msr-spacing) * 5)}.msr\\:h-6{height:calc(var(--msr-spacing) * 6)}.msr\\:h-7{height:calc(var(--msr-spacing) * 7)}.msr\\:h-8{height:calc(var(--msr-spacing) * 8)}.msr\\:h-\\[3px\\]{height:3px}.msr\\:h-\\[14px\\]{height:14px}.msr\\:h-auto{height:auto}.msr\\:h-full{height:100%}.msr\\:h-max{height:max-content}.msr\\:h-px{height:1px}.msr\\:max-h-32{max-height:calc(var(--msr-spacing) * 32)}.msr\\:max-h-36{max-height:calc(var(--msr-spacing) * 36)}.msr\\:max-h-48{max-height:calc(var(--msr-spacing) * 48)}.msr\\:max-h-\\[28rem\\]{max-height:28rem}.msr\\:max-h-\\[120px\\]{max-height:120px}.msr\\:max-h-full{max-height:100%}.msr\\:min-h-0{min-height:calc(var(--msr-spacing) * 0)}.msr\\:min-h-6{min-height:calc(var(--msr-spacing) * 6)}.msr\\:min-h-8{min-height:calc(var(--msr-spacing) * 8)}.msr\\:min-h-\\[4\\.5rem\\]{min-height:4.5rem}.msr\\:w-0{width:calc(var(--msr-spacing) * 0)}.msr\\:w-0\\.5{width:calc(var(--msr-spacing) * .5)}.msr\\:w-4{width:calc(var(--msr-spacing) * 4)}.msr\\:w-5{width:calc(var(--msr-spacing) * 5)}.msr\\:w-6{width:calc(var(--msr-spacing) * 6)}.msr\\:w-8{width:calc(var(--msr-spacing) * 8)}.msr\\:w-9{width:calc(var(--msr-spacing) * 9)}.msr\\:w-12{width:calc(var(--msr-spacing) * 12)}.msr\\:w-32{width:calc(var(--msr-spacing) * 32)}.msr\\:w-40{width:calc(var(--msr-spacing) * 40)}.msr\\:w-44{width:calc(var(--msr-spacing) * 44)}.msr\\:w-48{width:calc(var(--msr-spacing) * 48)}.msr\\:w-52{width:calc(var(--msr-spacing) * 52)}.msr\\:w-60{width:calc(var(--msr-spacing) * 60)}.msr\\:w-64{width:calc(var(--msr-spacing) * 64)}.msr\\:w-72{width:calc(var(--msr-spacing) * 72)}.msr\\:w-\\[18px\\]{width:18px}.msr\\:w-\\[22rem\\]{width:22rem}.msr\\:w-\\[26px\\]{width:26px}.msr\\:w-\\[36rem\\]{width:36rem}.msr\\:w-\\[220px\\]{width:220px}.msr\\:w-auto{width:auto}.msr\\:w-full{width:100%}.msr\\:w-max{width:max-content}.msr\\:w-px{width:1px}.msr\\:max-w-\\[180px\\]{max-width:180px}.msr\\:max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.msr\\:max-w-\\[calc\\(100vw-24px\\)\\]{max-width:calc(100vw - 24px)}.msr\\:max-w-\\[min\\(100vw-16px\\,15rem\\)\\]{max-width:min(100vw - 16px,15rem)}.msr\\:max-w-\\[min\\(200px\\,calc\\(100vw-24px\\)\\)\\]{max-width:min(200px,100vw - 24px)}.msr\\:max-w-\\[min\\(240px\\,calc\\(100vw-16px\\)\\)\\]{max-width:min(240px,100vw - 16px)}.msr\\:max-w-full{max-width:100%}.msr\\:min-w-0{min-width:calc(var(--msr-spacing) * 0)}.msr\\:min-w-32{min-width:calc(var(--msr-spacing) * 32)}.msr\\:min-w-36{min-width:calc(var(--msr-spacing) * 36)}.msr\\:min-w-44{min-width:calc(var(--msr-spacing) * 44)}.msr\\:flex-1{flex:1}.msr\\:flex-none{flex:none}.msr\\:shrink-0{flex-shrink:0}.msr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-rotate-90{rotate:-90deg}.msr\\:rotate-45{rotate:45deg}.msr\\:rotate-90{rotate:90deg}.msr\\:animate-\\[mesurer-screenshot-preview_5\\.16s_ease-out_both\\]{animation:5.16s ease-out both mesurer-screenshot-preview}.msr\\:cursor-crosshair{cursor:crosshair}.msr\\:cursor-default{cursor:default}.msr\\:cursor-ew-resize{cursor:ew-resize}.msr\\:cursor-move{cursor:move}.msr\\:cursor-nesw-resize{cursor:nesw-resize}.msr\\:cursor-ns-resize{cursor:ns-resize}.msr\\:cursor-nwse-resize{cursor:nwse-resize}.msr\\:cursor-pointer{cursor:pointer}.msr\\:cursor-text{cursor:text}.msr\\:touch-none{touch-action:none}.msr\\:resize-none{resize:none}.msr\\:list-none{list-style-type:none}.msr\\:appearance-none{appearance:none}.msr\\:grid-cols-\\[44px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:44px minmax(0,1fr)}.msr\\:grid-cols-\\[56px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:56px minmax(0,1fr)}.msr\\:grid-cols-\\[78px_150px\\]{grid-template-columns:78px 150px}.msr\\:grid-cols-\\[78px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:78px minmax(0,1fr)}.msr\\:flex-col{flex-direction:column}.msr\\:items-baseline{align-items:baseline}.msr\\:items-center{align-items:center}.msr\\:items-start{align-items:flex-start}.msr\\:items-stretch{align-items:stretch}.msr\\:justify-between{justify-content:space-between}.msr\\:justify-center{justify-content:center}.msr\\:justify-end{justify-content:flex-end}.msr\\:gap-0{gap:calc(var(--msr-spacing) * 0)}.msr\\:gap-0\\.5{gap:calc(var(--msr-spacing) * .5)}.msr\\:gap-1{gap:calc(var(--msr-spacing) * 1)}.msr\\:gap-1\\.5{gap:calc(var(--msr-spacing) * 1.5)}.msr\\:gap-2{gap:calc(var(--msr-spacing) * 2)}.msr\\:gap-\\[2px\\]{gap:2px}.msr\\:gap-px{gap:1px}.msr\\:self-center{align-self:center}.msr\\:justify-self-end{justify-self:flex-end}.msr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.msr\\:overflow-hidden{overflow:hidden}.msr\\:overflow-visible{overflow:visible}.msr\\:overflow-y-auto{overflow-y:auto}.msr\\:rounded{border-radius:.25rem}.msr\\:rounded-\\[2px\\]{border-radius:2px}.msr\\:rounded-\\[3px\\]{border-radius:3px}.msr\\:rounded-\\[4px\\]{border-radius:4px}.msr\\:rounded-\\[10px\\]{border-radius:10px}.msr\\:rounded-full{border-radius:3.40282e38px}.msr\\:rounded-lg{border-radius:var(--msr-radius-lg)}.msr\\:rounded-md{border-radius:var(--msr-radius-md)}.msr\\:rounded-none{border-radius:0}.msr\\:border{border-style:var(--tw-border-style);border-width:1px}.msr\\:border-0{border-style:var(--tw-border-style);border-width:0}.msr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.msr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.msr\\:border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.msr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.msr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.msr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.msr\\:border-dashed{--tw-border-style:dashed;border-style:dashed}.msr\\:border-dotted{--tw-border-style:dotted;border-style:dotted}.msr\\:border-solid{--tw-border-style:solid;border-style:solid}.msr\\:border-\\[\\#0d99ff\\]{border-color:#0d99ff}.msr\\:border-\\[\\#2563eb\\]\\/70{border-color:oklab(54.615% -.026671 -.213549/.7)}.msr\\:border-\\[var\\(--msr-danger-border\\)\\]{border-color:var(--msr-danger-border)}.msr\\:border-black\\/10{border-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:border-black\\/10{border-color:color-mix(in oklab, var(--msr-color-black) 10%, transparent)}}.msr\\:border-ink-100{border-color:var(--msr-color-ink-100)}.msr\\:border-ink-200{border-color:var(--msr-color-ink-200)}.msr\\:border-ink-300{border-color:var(--msr-color-ink-300)}.msr\\:border-ink-500,.msr\\:border-ink-500\\/30{border-color:var(--msr-color-ink-500)}@supports (color:color-mix(in lab, red, red)){.msr\\:border-ink-500\\/30{border-color:color-mix(in oklab, var(--msr-color-ink-500) 30%, transparent)}}.msr\\:border-ink-700{border-color:var(--msr-color-ink-700)}.msr\\:border-transparent{border-color:#0000}.msr\\:border-white{border-color:var(--msr-color-white)}.msr\\:\\!bg-black\\/50{background-color:var(--msr-color-black)!important}@supports (color:color-mix(in lab, red, red)){.msr\\:\\!bg-black\\/50{background-color:color-mix(in oklab, var(--msr-color-black) 50%, transparent)!important}}.msr\\:bg-\\[\\#0d99ff\\]{background-color:#0d99ff}.msr\\:bg-\\[\\#0d99ff\\]\\/8{background-color:oklab(66.9841% -.0648249 -.170866/.08)}.msr\\:bg-\\[\\#0d99ff\\]\\/10{background-color:oklab(66.9841% -.0648249 -.170866/.1)}.msr\\:bg-\\[\\#2563eb\\]{background-color:#2563eb}.msr\\:bg-\\[var\\(--msr-danger-solid-bg\\)\\]{background-color:var(--msr-danger-solid-bg)}.msr\\:bg-black,.msr\\:bg-black\\/4{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-black\\/4{background-color:color-mix(in oklab, var(--msr-color-black) 4%, transparent)}}.msr\\:bg-black\\/40{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-black\\/40{background-color:color-mix(in oklab, var(--msr-color-black) 40%, transparent)}}.msr\\:bg-ink-50{background-color:var(--msr-color-ink-50)}.msr\\:bg-ink-100{background-color:var(--msr-color-ink-100)}.msr\\:bg-ink-200{background-color:var(--msr-color-ink-200)}.msr\\:bg-ink-300{background-color:var(--msr-color-ink-300)}.msr\\:bg-ink-500\\/50{background-color:var(--msr-color-ink-500)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-ink-500\\/50{background-color:color-mix(in oklab, var(--msr-color-ink-500) 50%, transparent)}}.msr\\:bg-ink-900,.msr\\:bg-ink-900\\/45{background-color:var(--msr-color-ink-900)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-ink-900\\/45{background-color:color-mix(in oklab, var(--msr-color-ink-900) 45%, transparent)}}.msr\\:bg-ink-900\\/90{background-color:var(--msr-color-ink-900)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-ink-900\\/90{background-color:color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent)}}.msr\\:bg-transparent{background-color:#0000}.msr\\:bg-white,.msr\\:bg-white\\/5{background-color:var(--msr-color-white)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-white\\/5{background-color:color-mix(in oklab, var(--msr-color-white) 5%, transparent)}}.msr\\:object-contain{object-fit:contain}.msr\\:p-0{padding:calc(var(--msr-spacing) * 0)}.msr\\:p-1{padding:calc(var(--msr-spacing) * 1)}.msr\\:p-2{padding:calc(var(--msr-spacing) * 2)}.msr\\:p-3{padding:calc(var(--msr-spacing) * 3)}.msr\\:p-\\[2px\\]{padding:2px}.msr\\:p-px{padding:1px}.msr\\:px-0{padding-inline:calc(var(--msr-spacing) * 0)}.msr\\:px-0\\.5{padding-inline:calc(var(--msr-spacing) * .5)}.msr\\:px-1{padding-inline:calc(var(--msr-spacing) * 1)}.msr\\:px-1\\.5{padding-inline:calc(var(--msr-spacing) * 1.5)}.msr\\:px-2{padding-inline:calc(var(--msr-spacing) * 2)}.msr\\:px-3{padding-inline:calc(var(--msr-spacing) * 3)}.msr\\:py-0\\.5{padding-block:calc(var(--msr-spacing) * .5)}.msr\\:py-1{padding-block:calc(var(--msr-spacing) * 1)}.msr\\:py-1\\.5{padding-block:calc(var(--msr-spacing) * 1.5)}.msr\\:py-2{padding-block:calc(var(--msr-spacing) * 2)}.msr\\:py-6{padding-block:calc(var(--msr-spacing) * 6)}.msr\\:pt-1\\.5{padding-top:calc(var(--msr-spacing) * 1.5)}.msr\\:pt-8{padding-top:calc(var(--msr-spacing) * 8)}.msr\\:pr-1\\.5{padding-right:calc(var(--msr-spacing) * 1.5)}.msr\\:pr-2{padding-right:calc(var(--msr-spacing) * 2)}.msr\\:pr-6{padding-right:calc(var(--msr-spacing) * 6)}.msr\\:pb-1{padding-bottom:calc(var(--msr-spacing) * 1)}.msr\\:pb-2{padding-bottom:calc(var(--msr-spacing) * 2)}.msr\\:pl-1{padding-left:calc(var(--msr-spacing) * 1)}.msr\\:pl-1\\.5{padding-left:calc(var(--msr-spacing) * 1.5)}.msr\\:pl-3{padding-left:calc(var(--msr-spacing) * 3)}.msr\\:pl-6{padding-left:calc(var(--msr-spacing) * 6)}.msr\\:text-center{text-align:center}.msr\\:text-left{text-align:left}.msr\\:text-right{text-align:right}.msr\\:font-mono{font-family:var(--msr-font-mono)}.msr\\:text-\\[9px\\]{font-size:9px}.msr\\:text-\\[10px\\]{font-size:10px}.msr\\:text-\\[11px\\]{font-size:11px}.msr\\:text-\\[12px\\]{font-size:12px}.msr\\:text-\\[13px\\]{font-size:13px}.msr\\:text-\\[16px\\]{font-size:16px}.msr\\:leading-4{--tw-leading:calc(var(--msr-spacing) * 4);line-height:calc(var(--msr-spacing) * 4)}.msr\\:leading-5{--tw-leading:calc(var(--msr-spacing) * 5);line-height:calc(var(--msr-spacing) * 5)}.msr\\:leading-6{--tw-leading:calc(var(--msr-spacing) * 6);line-height:calc(var(--msr-spacing) * 6)}.msr\\:leading-none{--tw-leading:1;line-height:1}.msr\\:font-medium{--tw-font-weight:var(--msr-font-weight-medium);font-weight:var(--msr-font-weight-medium)}.msr\\:font-normal{--tw-font-weight:var(--msr-font-weight-normal);font-weight:var(--msr-font-weight-normal)}.msr\\:font-semibold{--tw-font-weight:var(--msr-font-weight-semibold);font-weight:var(--msr-font-weight-semibold)}.msr\\:text-pretty{text-wrap:pretty}.msr\\:break-words{overflow-wrap:break-word}.msr\\:whitespace-normal{white-space:normal}.msr\\:whitespace-nowrap{white-space:nowrap}.msr\\:whitespace-pre{white-space:pre}.msr\\:whitespace-pre-wrap{white-space:pre-wrap}.msr\\:text-\\[\\#64748b\\]{color:#64748b}.msr\\:text-\\[var\\(--msr-danger-solid-text\\)\\]{color:var(--msr-danger-solid-text)}.msr\\:text-\\[var\\(--msr-danger-text\\)\\]{color:var(--msr-danger-text)}.msr\\:text-ink-50{color:var(--msr-color-ink-50)}.msr\\:text-ink-500{color:var(--msr-color-ink-500)}.msr\\:text-ink-700{color:var(--msr-color-ink-700)}.msr\\:text-ink-900{color:var(--msr-color-ink-900)}.msr\\:text-red-600{color:var(--msr-color-red-600)}.msr\\:text-white,.msr\\:text-white\\/60{color:var(--msr-color-white)}@supports (color:color-mix(in lab, red, red)){.msr\\:text-white\\/60{color:color-mix(in oklab, var(--msr-color-white) 60%, transparent)}}.msr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.msr\\:underline-offset-2{text-underline-offset:2px}.msr\\:caret-\\[\\#0d99ff\\]{caret-color:#0d99ff}.msr\\:opacity-0{opacity:0}.msr\\:opacity-100{opacity:1}.msr\\:shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:shadow-\\[0_1px_2px_rgb\\(0_0_0_\\/_0\\.06\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:shadow-floating{--tw-shadow:0 0 0 .4px var(--tw-shadow-color,#00000038), 0 6px 18px var(--tw-shadow-color,#00000008), 0 3px 9px var(--tw-shadow-color,#0000000f), 0 1px 1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:outline,.msr\\:outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.msr\\:outline-\\[\\#0d99ff\\]{outline-color:#0d99ff}.msr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[left\\]{transition-property:left;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[max-height\\]{transition-property:max-height;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-none{transition-property:none}.msr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.msr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.msr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.msr\\:ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{--tw-ease:cubic-bezier(.22,1,.36,1);transition-timing-function:cubic-bezier(.22,1,.36,1)}.msr\\:ease-\\[ease\\]{--tw-ease:ease;transition-timing-function:ease}.msr\\:will-change-transform{will-change:transform}.msr\\:outline-none{--tw-outline-style:none;outline-style:none}.msr\\:select-none{-webkit-user-select:none;user-select:none}.msr\\:select-text{-webkit-user-select:text;user-select:text}@media (hover:hover){.msr\\:group-hover\\:h-3:is(:where(.msr\\:group):hover *){height:calc(var(--msr-spacing) * 3)}.msr\\:group-hover\\:opacity-100:is(:where(.msr\\:group):hover *){opacity:1}.msr\\:group-hover\\/video\\:pointer-events-auto:is(:where(.msr\\:group\\/video):hover *){pointer-events:auto}.msr\\:group-hover\\/video\\:opacity-100:is(:where(.msr\\:group\\/video):hover *){opacity:1}}.msr\\:group-focus-visible\\:h-3:is(:where(.msr\\:group):focus-visible *){height:calc(var(--msr-spacing) * 3)}.msr\\:focus-within\\:pointer-events-auto:focus-within{pointer-events:auto}.msr\\:focus-within\\:relative:focus-within{position:relative}.msr\\:focus-within\\:z-\\[1\\]:focus-within{z-index:1}.msr\\:focus-within\\:rounded-l-\\[5px\\]:focus-within{border-top-left-radius:5px;border-bottom-left-radius:5px}.msr\\:focus-within\\:rounded-r-\\[5px\\]:focus-within{border-top-right-radius:5px;border-bottom-right-radius:5px}.msr\\:focus-within\\:border-\\[\\#0d99ff\\]:focus-within{border-color:#0d99ff}.msr\\:focus-within\\:opacity-100:focus-within{opacity:1}.msr\\:focus-within\\:shadow-\\[0_0_0_1px_\\#0d99ff\\]:focus-within{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#0d99ff);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.msr\\:hover\\:border-ink-200:hover{border-color:var(--msr-color-ink-200)}.msr\\:hover\\:\\!bg-black\\/60:hover{background-color:var(--msr-color-black)!important}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:\\!bg-black\\/60:hover{background-color:color-mix(in oklab, var(--msr-color-black) 60%, transparent)!important}}.msr\\:hover\\:bg-\\[\\#0d99ff\\]:hover{background-color:#0d99ff}.msr\\:hover\\:bg-\\[\\#087dcc\\]:hover{background-color:#087dcc}.msr\\:hover\\:bg-\\[var\\(--msr-danger-bg\\)\\]:hover{background-color:var(--msr-danger-bg)}.msr\\:hover\\:bg-\\[var\\(--msr-danger-solid-hover\\)\\]:hover{background-color:var(--msr-danger-solid-hover)}.msr\\:hover\\:bg-black\\/4:hover{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:bg-black\\/4:hover{background-color:color-mix(in oklab, var(--msr-color-black) 4%, transparent)}}.msr\\:hover\\:bg-ink-50:hover{background-color:var(--msr-color-ink-50)}.msr\\:hover\\:bg-ink-100:hover{background-color:var(--msr-color-ink-100)}.msr\\:hover\\:bg-ink-200:hover,.msr\\:hover\\:bg-ink-200\\/50:hover{background-color:var(--msr-color-ink-200)}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:bg-ink-200\\/50:hover{background-color:color-mix(in oklab, var(--msr-color-ink-200) 50%, transparent)}}.msr\\:hover\\:bg-red-50:hover{background-color:var(--msr-color-red-50)}.msr\\:hover\\:bg-transparent:hover{background-color:#0000}.msr\\:hover\\:text-ink-700:hover{color:var(--msr-color-ink-700)}.msr\\:hover\\:text-ink-900:hover{color:var(--msr-color-ink-900)}.msr\\:hover\\:text-white:hover{color:var(--msr-color-white)}.msr\\:hover\\:underline:hover{text-decoration-line:underline}.msr\\:hover\\:focus-within\\:border-\\[\\#0d99ff\\]:hover:focus-within{border-color:#0d99ff}}.msr\\:focus\\:border-\\[\\#0d99ff\\]:focus{border-color:#0d99ff}.msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,#0d99ff);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.msr\\:focus-visible\\:bg-ink-100:focus-visible{background-color:var(--msr-color-ink-100)}.msr\\:focus-visible\\:opacity-100:focus-visible{opacity:1}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--color-ink-700\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--color-ink-700));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-danger-text\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-danger-text));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible{--tw-ring-color:var(--msr-accent)}@supports (color:color-mix(in lab, red, red)){.msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible{--tw-ring-color:color-mix(in oklab, var(--msr-accent) 25%, transparent)}}.msr\\:focus-visible\\:outline:focus-visible,.msr\\:focus-visible\\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.msr\\:focus-visible\\:outline-offset-1:focus-visible{outline-offset:1px}.msr\\:focus-visible\\:outline-ink-500:focus-visible{outline-color:var(--msr-color-ink-500)}.msr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.msr\\:focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.msr\\:disabled\\:cursor-default:disabled{cursor:default}.msr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.msr\\:disabled\\:opacity-40:disabled{opacity:.4}@media (prefers-reduced-motion:reduce){.msr\\:motion-reduce\\:transition-none{transition-property:none}}.msr\\:rounded-control{border-radius:var(--msr-radius-control)}.msr\\:rounded-wide-card{border-radius:var(--msr-radius-wide-card)}}:root,:host{--color-ink-50:#f8fafc;--color-ink-100:#f1f5f9;--color-ink-200:#e2e8f0;--color-ink-300:#cbd5e1;--color-ink-500:#64748b;--color-ink-700:#334155;--color-ink-900:#18181b}:host{all:initial;color-scheme:light dark;color:var(--msr-color-ink-900);letter-spacing:normal;--msr-spacing:4px;direction:ltr;font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;display:block}.mesurer-root{--msr-accent:#0d99ff;--msr-surface:#fff;--msr-surface-raised:#fff;--msr-surface-muted:var(--msr-color-ink-50);--msr-content:var(--msr-color-ink-900);--msr-color-white:#fff;--msr-color-black:#000;--msr-danger-bg:#fef2f2;--msr-danger-border:#fecaca;--msr-danger-text:#dc2626;--msr-danger-solid-bg:#dc2626;--msr-danger-solid-hover:#b91c1c;--msr-danger-solid-text:#fff;--msr-control-thumb:#fff;--msr-slider-track:#0f172a29;--msr-shadow-toolbar:drop-shadow(0 0 .4px #00000038) drop-shadow(0 6px 18px #00000008) drop-shadow(0 3px 9px #0000000f) drop-shadow(0 1px 1px #0000000f);--msr-shadow-floating:0 0 0 .4px #00000038, 0 6px 18px #00000008, 0 3px 9px #0000000f, 0 1px 1px #0000000f;--msr-shadow-select-menu:var(--msr-shadow-floating);--msr-comment-menu-surface:var(--msr-surface-raised);--msr-shadow-comment-menu:var(--msr-shadow-select-menu);color:var(--msr-content);color-scheme:light}.mesurer-root [class~=msr\\:bg-white]{background-color:var(--msr-surface)!important}.mesurer-root [class~="msr:bg-[#0d99ff]"],.mesurer-root [class~="msr:hover:bg-[#0d99ff]"]:hover{background-color:var(--msr-accent)!important}.mesurer-root [class~="msr:border-[#0d99ff]"]{border-color:var(--msr-accent)!important}.mesurer-root [class~="msr:bg-[#0d99ff]/8"]{background-color:var(--msr-accent)!important}@supports (color:color-mix(in lab, red, red)){.mesurer-root [class~="msr:bg-[#0d99ff]/8"]{background-color:color-mix(in srgb, var(--msr-accent) 8%, transparent)!important}}.mesurer-root [class~=msr\\:text-black]{color:var(--msr-content)!important}.mesurer-root .mesurer-control-thumb{background-color:var(--msr-control-thumb)!important}.mesurer-root button{-webkit-user-select:none;user-select:none;cursor:default!important}.mesurer-root .mesurer-settings-button-ghost{opacity:.7}.mesurer-root .mesurer-settings-button-ghost:hover,.mesurer-root .mesurer-settings-button-ghost:focus-visible{opacity:1}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-track-rail{background-color:var(--msr-color-ink-200)}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-track-clip{background-color:var(--msr-color-ink-300)}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-playhead,.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-trim-bar{background-color:var(--msr-color-ink-900)}.mesurer-root .mesurer-switch-thumb[data-checked=false]{background-color:var(--msr-color-ink-200)!important}.mesurer-root [class~="msr:hover:bg-black/4"]:hover,.mesurer-root [class~="msr:hover:bg-black/5"]:hover{background-color:var(--msr-content)!important}@supports (color:color-mix(in lab, red, red)){.mesurer-root [class~="msr:hover:bg-black/4"]:hover,.mesurer-root [class~="msr:hover:bg-black/5"]:hover{background-color:color-mix(in srgb, var(--msr-content) 6%, transparent)!important}}.mesurer-root .mesurer-menu-surface,.mesurer-root .mesurer-color-picker,.mesurer-root .mesurer-comment-card,.mesurer-root .mesurer-comment-hover-card,.mesurer-root .mesurer-comment-delete-confirmation{color:var(--msr-content);background-color:var(--msr-surface-raised)!important}.mesurer-root .mesurer-section-divider{background-color:var(--msr-color-ink-200)!important}.mesurer-root .mesurer-settings-select-menu{box-shadow:var(--msr-shadow-select-menu)}.mesurer-root .mesurer-comment-overflow-menu,.mesurer-root .mesurer-comment-delete-confirmation{box-shadow:var(--msr-shadow-comment-menu);background-color:var(--msr-comment-menu-surface)!important}.mesurer-root .mesurer-comment-menu-item:hover{background-color:var(--msr-color-ink-200)!important}.mesurer-root .mesurer-comment-menu-danger{color:var(--msr-danger-text)!important}.mesurer-root .mesurer-comment-menu-danger:hover{background-color:var(--msr-danger-bg)!important}.mesurer-root .mesurer-settings-button-default{background-color:#0000}.mesurer-root .mesurer-settings-button-default:hover{background-color:var(--msr-color-ink-50)}.mesurer-root[data-theme=dark] .mesurer-control-shell{background-color:var(--msr-color-ink-100)}.mesurer-root[data-theme=dark] .mesurer-settings-panel select,.mesurer-root[data-theme=dark] .mesurer-settings-select,.mesurer-root[data-theme=dark] .mesurer-settings-select-menu{background-color:var(--msr-surface-raised)!important;border-color:var(--msr-color-ink-200)!important}.mesurer-root[data-theme=dark] .mesurer-settings-button-default:hover{background-color:var(--msr-surface)!important}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system] .mesurer-control-shell{background-color:var(--msr-color-ink-100)}.mesurer-root[data-theme=system] .mesurer-settings-panel select,.mesurer-root[data-theme=system] .mesurer-settings-select,.mesurer-root[data-theme=system] .mesurer-settings-select-menu{background-color:var(--msr-surface-raised)!important;border-color:var(--msr-color-ink-200)!important}.mesurer-root[data-theme=system] .mesurer-settings-button-default:hover{background-color:var(--msr-surface)!important}}.mesurer-root[data-theme=dark] .mesurer-switch-track[data-checked=false]{background-color:var(--msr-color-ink-100)!important}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system] .mesurer-switch-track[data-checked=false]{background-color:var(--msr-color-ink-100)!important}}.mesurer-root .mesurer-settings-panel .mesurer-control-focus :is(input,select):focus{box-shadow:none!important;outline:none!important}.mesurer-root[data-theme=dark]{--msr-accent:#0c8ce9;--msr-color-red-50:#3f2020;--msr-color-red-200:#7f3f46;--msr-color-red-600:#f87171;--msr-color-red-700:#fca5a5;--msr-danger-bg:#3f2020;--msr-danger-border:#7f3f46;--msr-danger-text:#f87171;--msr-danger-solid-bg:#c95058;--msr-danger-solid-hover:#b7424b;--msr-danger-solid-text:#f5f5f5;--msr-color-ink-50:#3a3a3a;--msr-color-ink-100:#414141;--msr-color-ink-200:#4a4a4a;--msr-color-ink-300:#5a5a5a;--msr-color-ink-500:#a0a0a0;--msr-color-ink-700:#dedede;--msr-color-ink-900:#f5f5f5;--msr-surface:#323232;--msr-surface-raised:#3a3a3a;--msr-surface-muted:#3a3a3a;--msr-color-white:#f5f5f5;--msr-color-black:#171717;--msr-control-thumb:#f4f4f5;--msr-slider-track:#f5f5f53d;--msr-shadow-toolbar:drop-shadow(0 0 .4px lch(100% 0 0/.1)) drop-shadow(0 3px 8px lch(0% 0 0/.125)) drop-shadow(0 2px 5px lch(0% 0 0/.125)) drop-shadow(0 1px 1px lch(0% 0 0/.125));--msr-shadow-floating:0 0 0 .4px lch(100% 0 0/.05), 0 4px 12px lch(0% 0 0/.12), 0 1px 3px lch(0% 0 0/.1);--msr-shadow-select-menu:0 0 0 .4px lch(100% 0 0/.14), 0 4px 12px lch(0% 0 0/.22), 0 1px 3px lch(0% 0 0/.18);--msr-comment-menu-surface:#323232;--msr-shadow-comment-menu:0 0 0 .5px lch(100% 0 0/.16), 0 5px 14px lch(0% 0 0/.26), 0 1px 3px lch(0% 0 0/.18);color-scheme:dark}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system]{--msr-accent:#0c8ce9;--msr-color-red-50:#3f2020;--msr-color-red-200:#7f3f46;--msr-color-red-600:#f87171;--msr-color-red-700:#fca5a5;--msr-danger-bg:#3f2020;--msr-danger-border:#7f3f46;--msr-danger-text:#f87171;--msr-danger-solid-bg:#c95058;--msr-danger-solid-hover:#b7424b;--msr-danger-solid-text:#f5f5f5;--msr-color-ink-50:#3a3a3a;--msr-color-ink-100:#414141;--msr-color-ink-200:#4a4a4a;--msr-color-ink-300:#5a5a5a;--msr-color-ink-500:#a0a0a0;--msr-color-ink-700:#dedede;--msr-color-ink-900:#f5f5f5;--msr-surface:#323232;--msr-surface-raised:#3a3a3a;--msr-surface-muted:#3a3a3a;--msr-color-white:#f5f5f5;--msr-color-black:#171717;--msr-control-thumb:#f4f4f5;--msr-slider-track:#f5f5f53d;--msr-shadow-toolbar:drop-shadow(0 0 .4px lch(100% 0 0/.1)) drop-shadow(0 3px 8px lch(0% 0 0/.125)) drop-shadow(0 2px 5px lch(0% 0 0/.125)) drop-shadow(0 1px 1px lch(0% 0 0/.125));--msr-shadow-floating:0 0 0 .4px lch(100% 0 0/.05), 0 4px 12px lch(0% 0 0/.12), 0 1px 3px lch(0% 0 0/.1);--msr-shadow-select-menu:0 0 0 .4px lch(100% 0 0/.14), 0 4px 12px lch(0% 0 0/.22), 0 1px 3px lch(0% 0 0/.18);--msr-comment-menu-surface:#323232;--msr-shadow-comment-menu:0 0 0 .5px lch(100% 0 0/.16), 0 5px 14px lch(0% 0 0/.26), 0 1px 3px lch(0% 0 0/.18);color-scheme:dark}}.mesurer-color-picker,.mesurer-color-picker *,.mesurer-root [data-mesurer-inspect-info-card],.mesurer-root [data-mesurer-inspect-info-card] *,[data-mesurer-overlay][data-mesurer-inspect],[data-mesurer-overlay][data-mesurer-inspect] *{cursor:default!important}.mesurer-root button[data-mesurer-resize-cursor],.mesurer-root button[data-mesurer-resize-cursor] *,[data-mesurer-overlay][data-mesurer-inspect] [data-mesurer-resize-cursor],[data-mesurer-overlay][data-mesurer-inspect] [data-mesurer-resize-cursor] *{cursor:var(--msr-resize-cursor)!important}html[data-mesurer-resize-cursor],html[data-mesurer-resize-cursor] *,html[data-mesurer-resize-cursor] [data-mesurer-overlay][data-mesurer-inspect],html[data-mesurer-resize-cursor] [data-mesurer-overlay][data-mesurer-inspect] *,.mesurer-root[data-mesurer-resize-cursor],.mesurer-root[data-mesurer-resize-cursor] *{cursor:var(--msr-resize-cursor-lock)!important}.mesurer-root,.mesurer-root *,.mesurer-root :before,.mesurer-root :after{box-sizing:border-box}.mesurer-toolbar-motion{--msr-toolbar-motion:.2s ease;z-index:0;isolation:isolate;width:max-content;max-width:100%;display:block;position:relative}.mesurer-layout-guides,.mesurer-layout-guides-layer,.mesurer-layout-guides-grid{pointer-events:none;position:absolute;inset:0}.mesurer-layout-guides{z-index:2;overflow:hidden}.mesurer-toolbar-chrome{z-index:0;background:var(--msr-surface);width:100%;filter:var(--msr-shadow-toolbar);transform-origin:0;pointer-events:none;border-radius:9px;position:absolute;inset:0 auto 0 0;overflow:visible}.mesurer-toolbar-clip{z-index:1;isolation:isolate;transform-origin:0;position:relative;overflow:visible}.mesurer-toolbar-motion[data-resizing=collapse] .mesurer-toolbar-clip{overflow:hidden}.mesurer-toolbar-motion[data-resizing] .mesurer-toolbar-tooltips{visibility:hidden!important}.mesurer-toolbar-surface{transform-origin:0;padding:0;position:relative}.mesurer-toolbar-divider{background:var(--msr-color-ink-200);flex:none;align-self:stretch;width:1px;margin:0}.mesurer-toolbar-minimize-stage{min-width:0;width:var(--msr-expanded-w,auto);flex:none;overflow:visible}.mesurer-toolbar-minimize-stage[data-minimized=true]{width:var(--msr-icon-w,auto);overflow:hidden}.mesurer-toolbar-motion[data-resizing=collapse] .mesurer-toolbar-minimize-stage{overflow:hidden}.mesurer-toolbar-minimize-stage[data-minimized=true] .mesurer-toolbar-minimize-track{transform:translateX(calc(-1 * var(--msr-expanded-w,0px)))}.mesurer-toolbar-minimize-stage:has([role=dialog]),.mesurer-toolbar-minimize-stage:has([role=menu]),.mesurer-toolbar-minimize-stage:has(.mesurer-screenshot-preview){overflow:visible}.mesurer-toolbar-minimize-track{pointer-events:none;flex:none;display:flex;transform:translate(0)}.mesurer-toolbar-minimize-slot{flex:none}.mesurer-toolbar-minimize-slot[data-slot=expanded]{width:var(--msr-expanded-w,auto)}.mesurer-toolbar-minimize-slot[data-slot=icon]{width:auto}.mesurer-toolbar-minimize-slot:not([data-open=true]){pointer-events:none}.mesurer-toolbar-minimize-slot[data-open=true]{pointer-events:auto}.mesurer-toolbar-motion:not([data-resizing=collapse]) .mesurer-toolbar-minimize-slot[data-slot=icon]:not([data-open=true]){visibility:hidden}.mesurer-toolbar-restore svg{transform:translate(-.5px,.5px)}.mesurer-toolbar-tool-stage{min-width:0;width:var(--msr-inspect-w,auto);flex:none;overflow:hidden}.mesurer-toolbar-tool-stage[data-group=annotate]{width:var(--msr-annotate-w,auto)}.mesurer-toolbar-tool-stage[data-group=annotate] .mesurer-toolbar-tool-track{transform:translateX(calc(-1 * var(--msr-inspect-w,0px)))}.mesurer-toolbar-tool-stage:has([role=menu]),.mesurer-toolbar-tool-stage:has([role=dialog]){overflow:visible}.mesurer-toolbar-motion[data-resizing=true] .mesurer-toolbar-tool-stage{overflow:hidden}.mesurer-toolbar-tool-track{flex:none;display:flex;transform:translate(0)}.mesurer-toolbar-motion[data-ready=true] .mesurer-toolbar-tool-switch-pill{transition:transform var(--msr-toolbar-motion)}.mesurer-toolbar-tool-slot{flex:none}.mesurer-toolbar-tool-slot[data-group=inspect]{width:var(--msr-inspect-w,auto)}.mesurer-toolbar-tool-slot[data-group=annotate]{width:var(--msr-annotate-w,auto)}.mesurer-toolbar-tool-slot:not([data-open=true]){pointer-events:none}.mesurer-toolbar-motion:not([data-resizing]) .mesurer-toolbar-tool-slot:not([data-open=true]){visibility:hidden}.mesurer-toolbar-tool-panel{width:max-content}.mesurer-toolbar-tooltips{z-index:110;pointer-events:none;position:fixed;inset:0;overflow:visible}.mesurer-toolbar-trailing{z-index:1;isolation:isolate;background:var(--msr-surface);border-radius:0 9px 9px 0;flex:none;position:relative}.mesurer-toolbar-tool-switch{z-index:1;isolation:isolate;background:var(--msr-surface);position:relative}.mesurer-toolbar-tool-switch-pill{z-index:0;background:var(--msr-color-ink-200);border-radius:3px;width:28px;height:28px;position:absolute;top:2px;left:2px;transform:translate(0)}.mesurer-toolbar-tool-switch[data-value=annotate] .mesurer-toolbar-tool-switch-pill{transform:translate(30px)}.mesurer-toolbar-tool-switch>:not(.mesurer-toolbar-tool-switch-pill){z-index:1;position:relative}@media (prefers-reduced-motion:reduce){.mesurer-toolbar-motion,.mesurer-toolbar-chrome,.mesurer-toolbar-tool-track,.mesurer-toolbar-minimize-track,.mesurer-toolbar-trailing,.mesurer-toolbar-motion[data-ready=true] .mesurer-toolbar-tool-switch-pill{transition:none}.mesurer-screenshot-preview{animation-name:mesurer-screenshot-preview-reduced;animation-duration:5s;animation-timing-function:linear;animation-fill-mode:both}}@keyframes mesurer-screenshot-preview{0%,3.1%{opacity:0}6.2%,96.9%{opacity:1}to{opacity:0}}@keyframes mesurer-screenshot-preview-reduced{0%,to{opacity:1}}@keyframes mesurer-comment-nudge{0%,to{transform:translate(0)}35%{transform:translate(-3px)}70%{transform:translate(3px)}}.mesurer-comment-nudge{animation:.15s ease-out mesurer-comment-nudge}@keyframes mesurer-status-ellipsis{0%,32%{content:"."}33%,65%{content:".."}66%,to{content:"..."}}.mesurer-status-ellipsis{text-align:left;width:1.5em;display:inline-block}.mesurer-status-ellipsis:after{content:"...";animation:1.2s step-end infinite mesurer-status-ellipsis}@media (prefers-reduced-motion:reduce){.mesurer-status-ellipsis:after{content:"...";animation:none}}.mesurer-thin-scrollbar{scrollbar-width:thin;scrollbar-color:var(--msr-color-ink-200) transparent}.mesurer-thin-scrollbar::-webkit-scrollbar{width:4px;height:4px}.mesurer-thin-scrollbar::-webkit-scrollbar-track{background:0 0}.mesurer-thin-scrollbar::-webkit-scrollbar-thumb{background:var(--msr-color-ink-200);border-radius:var(--msr-radius-control)}.mesurer-thin-scrollbar:hover{scrollbar-color:var(--msr-color-ink-300) transparent}.mesurer-thin-scrollbar:hover::-webkit-scrollbar-thumb{background:var(--msr-color-ink-300)}.mesurer-thin-scrollbar::-webkit-scrollbar-corner{background:0 0}.mesurer-toast-surface{box-shadow:var(--msr-shadow-floating)}.mesurer-root{--msr-spacing:4px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
+var MESURER_STYLES = '/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--msr-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--msr-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--msr-color-red-50:oklch(97.1% .013 17.38);--msr-color-red-200:oklch(88.5% .062 18.334);--msr-color-red-600:oklch(57.7% .245 27.325);--msr-color-red-700:oklch(50.5% .213 27.518);--msr-color-black:#000;--msr-color-white:#fff;--msr-spacing:.25rem;--msr-text-xs:.75rem;--msr-text-xs--line-height:calc(1 / .75);--msr-text-sm:.875rem;--msr-text-sm--line-height:calc(1.25 / .875);--msr-font-weight-normal:400;--msr-font-weight-medium:500;--msr-font-weight-semibold:600;--msr-radius-sm:.25rem;--msr-radius-md:.375rem;--msr-radius-lg:.5rem;--msr-radius-xl:.75rem;--msr-ease-out:cubic-bezier(0, 0, .2, 1);--msr-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--msr-aspect-video:16 / 9;--msr-default-transition-duration:.15s;--msr-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--msr-default-font-family:var(--msr-font-sans);--msr-default-mono-font-family:var(--msr-font-mono);--msr-radius-control:5px;--msr-radius-wide-card:13px;--msr-shadow-toolbar:drop-shadow(0 0 .4px #00000038) drop-shadow(0 6px 18px #00000008) drop-shadow(0 3px 9px #0000000f) drop-shadow(0 1px 1px #0000000f);--msr-shadow-floating:0 0 .4px #00000038, 0 6px 18px #00000008, 0 3px 9px #0000000f, 0 1px 1px #0000000f;--msr-color-ink-50:#f8fafc;--msr-color-ink-100:#f1f5f9;--msr-color-ink-200:#e2e8f0;--msr-color-ink-300:#cbd5e1;--msr-color-ink-500:#64748b;--msr-color-ink-700:#334155;--msr-color-ink-900:#18181b}}@layer base{.mesurer-root{font-family:var(--msr-font-sans);font-size:12px;line-height:1.5}.mesurer-root button,.mesurer-root input,.mesurer-root select,.mesurer-root textarea{font-family:inherit;font-size:inherit;line-height:inherit}.mesurer-root input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}.mesurer-root input[type=search]::-webkit-search-decoration{appearance:none;display:none}.mesurer-root input[type=search]::-moz-search-clear{appearance:none;display:none}.mesurer-root input[type=search]::-ms-clear{appearance:none;display:none}:where(.mesurer-root,.mesurer-root *){--tw-border-style:solid;--tw-outline-style:solid;--tw-shadow:0 0 #0000;--tw-inset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;border:0 solid}.mesurer-root button,.mesurer-root input,.mesurer-root select,.mesurer-root textarea{appearance:none;font:inherit;color:inherit;letter-spacing:inherit;background-color:#0000;padding:0}}@layer components;@layer utilities{.msr\\:pointer-events-auto{pointer-events:auto}.msr\\:pointer-events-none{pointer-events:none}.msr\\:absolute{position:absolute}.msr\\:fixed{position:fixed}.msr\\:relative{position:relative}.msr\\:inset-0{inset:calc(var(--msr-spacing) * 0)}.msr\\:inset-x-0{inset-inline:calc(var(--msr-spacing) * 0)}.msr\\:inset-y-0{inset-block:calc(var(--msr-spacing) * 0)}.msr\\:top-0{top:calc(var(--msr-spacing) * 0)}.msr\\:top-0\\.5{top:calc(var(--msr-spacing) * .5)}.msr\\:top-1\\.5{top:calc(var(--msr-spacing) * 1.5)}.msr\\:top-1\\/2{top:50%}.msr\\:top-1\\/3{top:33.3333%}.msr\\:top-2\\/3{top:66.6667%}.msr\\:top-9{top:calc(var(--msr-spacing) * 9)}.msr\\:top-\\[18px\\]{top:18px}.msr\\:top-full{top:100%}.msr\\:right-0{right:calc(var(--msr-spacing) * 0)}.msr\\:right-1{right:calc(var(--msr-spacing) * 1)}.msr\\:right-1\\.5{right:calc(var(--msr-spacing) * 1.5)}.msr\\:right-2{right:calc(var(--msr-spacing) * 2)}.msr\\:right-\\[8px\\]{right:8px}.msr\\:bottom-0{bottom:calc(var(--msr-spacing) * 0)}.msr\\:bottom-1\\.5{bottom:calc(var(--msr-spacing) * 1.5)}.msr\\:bottom-4{bottom:calc(var(--msr-spacing) * 4)}.msr\\:bottom-full{bottom:100%}.msr\\:left-0{left:calc(var(--msr-spacing) * 0)}.msr\\:left-1\\.5{left:calc(var(--msr-spacing) * 1.5)}.msr\\:left-1\\/2{left:50%}.msr\\:left-1\\/3{left:33.3333%}.msr\\:left-2\\/3{left:66.6667%}.msr\\:left-\\[8px\\]{left:8px}.msr\\:left-\\[18px\\]{left:18px}.msr\\:left-full{left:100%}.msr\\:z-10{z-index:10}.msr\\:z-20{z-index:20}.msr\\:z-30{z-index:30}.msr\\:z-40{z-index:40}.msr\\:z-50{z-index:50}.msr\\:z-80{z-index:80}.msr\\:z-100{z-index:100}.msr\\:z-\\[1\\]{z-index:1}.msr\\:z-\\[2\\]{z-index:2}.msr\\:z-\\[25\\]{z-index:25}.msr\\:z-\\[60\\]{z-index:60}.msr\\:z-\\[70\\]{z-index:70}.msr\\:z-\\[71\\]{z-index:71}.msr\\:z-\\[80\\]{z-index:80}.msr\\:z-\\[85\\]{z-index:85}.msr\\:z-\\[90\\]{z-index:90}.msr\\:z-\\[100\\]{z-index:100}.msr\\:z-\\[101\\]{z-index:101}.msr\\:z-\\[120\\]{z-index:120}.msr\\:col-span-2{grid-column:span 2/span 2}.msr\\:m-0{margin:calc(var(--msr-spacing) * 0)}.msr\\:mx-auto{margin-inline:auto}.msr\\:my-1{margin-block:calc(var(--msr-spacing) * 1)}.msr\\:mt-0\\.5{margin-top:calc(var(--msr-spacing) * .5)}.msr\\:mt-1{margin-top:calc(var(--msr-spacing) * 1)}.msr\\:mt-2{margin-top:calc(var(--msr-spacing) * 2)}.msr\\:mt-3{margin-top:calc(var(--msr-spacing) * 3)}.msr\\:mt-4{margin-top:calc(var(--msr-spacing) * 4)}.msr\\:mb-1{margin-bottom:calc(var(--msr-spacing) * 1)}.msr\\:mb-2{margin-bottom:calc(var(--msr-spacing) * 2)}.msr\\:-ml-1{margin-left:calc(var(--msr-spacing) * -1)}.msr\\:ml-1{margin-left:calc(var(--msr-spacing) * 1)}.msr\\:ml-auto{margin-left:auto}.msr\\:box-border{box-sizing:border-box}.msr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.msr\\:block{display:block}.msr\\:flex{display:flex}.msr\\:grid{display:grid}.msr\\:inline-flex{display:inline-flex}.msr\\:size-1\\.5{width:calc(var(--msr-spacing) * 1.5);height:calc(var(--msr-spacing) * 1.5)}.msr\\:size-2{width:calc(var(--msr-spacing) * 2);height:calc(var(--msr-spacing) * 2)}.msr\\:size-3{width:calc(var(--msr-spacing) * 3);height:calc(var(--msr-spacing) * 3)}.msr\\:size-4{width:calc(var(--msr-spacing) * 4);height:calc(var(--msr-spacing) * 4)}.msr\\:size-5{width:calc(var(--msr-spacing) * 5);height:calc(var(--msr-spacing) * 5)}.msr\\:size-6{width:calc(var(--msr-spacing) * 6);height:calc(var(--msr-spacing) * 6)}.msr\\:size-7{width:calc(var(--msr-spacing) * 7);height:calc(var(--msr-spacing) * 7)}.msr\\:size-8{width:calc(var(--msr-spacing) * 8);height:calc(var(--msr-spacing) * 8)}.msr\\:size-\\[10px\\]{width:10px;height:10px}.msr\\:size-\\[18px\\]{width:18px;height:18px}.msr\\:size-full{width:100%;height:100%}.msr\\:h-0{height:calc(var(--msr-spacing) * 0)}.msr\\:h-1\\.5{height:calc(var(--msr-spacing) * 1.5)}.msr\\:h-2{height:calc(var(--msr-spacing) * 2)}.msr\\:h-2\\.5{height:calc(var(--msr-spacing) * 2.5)}.msr\\:h-3{height:calc(var(--msr-spacing) * 3)}.msr\\:h-5{height:calc(var(--msr-spacing) * 5)}.msr\\:h-6{height:calc(var(--msr-spacing) * 6)}.msr\\:h-7{height:calc(var(--msr-spacing) * 7)}.msr\\:h-8{height:calc(var(--msr-spacing) * 8)}.msr\\:h-\\[3px\\]{height:3px}.msr\\:h-\\[14px\\]{height:14px}.msr\\:h-auto{height:auto}.msr\\:h-full{height:100%}.msr\\:h-max{height:max-content}.msr\\:h-px{height:1px}.msr\\:max-h-32{max-height:calc(var(--msr-spacing) * 32)}.msr\\:max-h-36{max-height:calc(var(--msr-spacing) * 36)}.msr\\:max-h-48{max-height:calc(var(--msr-spacing) * 48)}.msr\\:max-h-\\[28rem\\]{max-height:28rem}.msr\\:max-h-\\[120px\\]{max-height:120px}.msr\\:max-h-full{max-height:100%}.msr\\:min-h-0{min-height:calc(var(--msr-spacing) * 0)}.msr\\:min-h-6{min-height:calc(var(--msr-spacing) * 6)}.msr\\:min-h-8{min-height:calc(var(--msr-spacing) * 8)}.msr\\:min-h-\\[4\\.5rem\\]{min-height:4.5rem}.msr\\:w-0{width:calc(var(--msr-spacing) * 0)}.msr\\:w-0\\.5{width:calc(var(--msr-spacing) * .5)}.msr\\:w-4{width:calc(var(--msr-spacing) * 4)}.msr\\:w-5{width:calc(var(--msr-spacing) * 5)}.msr\\:w-6{width:calc(var(--msr-spacing) * 6)}.msr\\:w-8{width:calc(var(--msr-spacing) * 8)}.msr\\:w-9{width:calc(var(--msr-spacing) * 9)}.msr\\:w-12{width:calc(var(--msr-spacing) * 12)}.msr\\:w-32{width:calc(var(--msr-spacing) * 32)}.msr\\:w-40{width:calc(var(--msr-spacing) * 40)}.msr\\:w-44{width:calc(var(--msr-spacing) * 44)}.msr\\:w-48{width:calc(var(--msr-spacing) * 48)}.msr\\:w-52{width:calc(var(--msr-spacing) * 52)}.msr\\:w-60{width:calc(var(--msr-spacing) * 60)}.msr\\:w-64{width:calc(var(--msr-spacing) * 64)}.msr\\:w-72{width:calc(var(--msr-spacing) * 72)}.msr\\:w-\\[18px\\]{width:18px}.msr\\:w-\\[22rem\\]{width:22rem}.msr\\:w-\\[26px\\]{width:26px}.msr\\:w-\\[36rem\\]{width:36rem}.msr\\:w-\\[220px\\]{width:220px}.msr\\:w-auto{width:auto}.msr\\:w-full{width:100%}.msr\\:w-max{width:max-content}.msr\\:w-px{width:1px}.msr\\:max-w-\\[180px\\]{max-width:180px}.msr\\:max-w-\\[calc\\(100vw-16px\\)\\]{max-width:calc(100vw - 16px)}.msr\\:max-w-\\[calc\\(100vw-24px\\)\\]{max-width:calc(100vw - 24px)}.msr\\:max-w-\\[min\\(100vw-16px\\,15rem\\)\\]{max-width:min(100vw - 16px,15rem)}.msr\\:max-w-\\[min\\(200px\\,calc\\(100vw-24px\\)\\)\\]{max-width:min(200px,100vw - 24px)}.msr\\:max-w-\\[min\\(240px\\,calc\\(100vw-16px\\)\\)\\]{max-width:min(240px,100vw - 16px)}.msr\\:max-w-full{max-width:100%}.msr\\:max-w-none{max-width:none}.msr\\:min-w-0{min-width:calc(var(--msr-spacing) * 0)}.msr\\:min-w-32{min-width:calc(var(--msr-spacing) * 32)}.msr\\:min-w-36{min-width:calc(var(--msr-spacing) * 36)}.msr\\:min-w-44{min-width:calc(var(--msr-spacing) * 44)}.msr\\:flex-1{flex:1}.msr\\:flex-none{flex:none}.msr\\:shrink-0{flex-shrink:0}.msr\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.msr\\:-rotate-90{rotate:-90deg}.msr\\:rotate-45{rotate:45deg}.msr\\:rotate-90{rotate:90deg}.msr\\:animate-\\[mesurer-screenshot-preview_5\\.16s_ease-out_both\\]{animation:5.16s ease-out both mesurer-screenshot-preview}.msr\\:cursor-crosshair{cursor:crosshair}.msr\\:cursor-default{cursor:default}.msr\\:cursor-ew-resize{cursor:ew-resize}.msr\\:cursor-move{cursor:move}.msr\\:cursor-nesw-resize{cursor:nesw-resize}.msr\\:cursor-ns-resize{cursor:ns-resize}.msr\\:cursor-nwse-resize{cursor:nwse-resize}.msr\\:cursor-pointer{cursor:pointer}.msr\\:cursor-text{cursor:text}.msr\\:touch-none{touch-action:none}.msr\\:resize-none{resize:none}.msr\\:list-none{list-style-type:none}.msr\\:appearance-none{appearance:none}.msr\\:grid-cols-\\[44px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:44px minmax(0,1fr)}.msr\\:grid-cols-\\[56px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:56px minmax(0,1fr)}.msr\\:grid-cols-\\[78px_150px\\]{grid-template-columns:78px 150px}.msr\\:grid-cols-\\[78px_minmax\\(0\\,1fr\\)\\]{grid-template-columns:78px minmax(0,1fr)}.msr\\:flex-col{flex-direction:column}.msr\\:items-baseline{align-items:baseline}.msr\\:items-center{align-items:center}.msr\\:items-start{align-items:flex-start}.msr\\:items-stretch{align-items:stretch}.msr\\:justify-between{justify-content:space-between}.msr\\:justify-center{justify-content:center}.msr\\:justify-end{justify-content:flex-end}.msr\\:gap-0{gap:calc(var(--msr-spacing) * 0)}.msr\\:gap-0\\.5{gap:calc(var(--msr-spacing) * .5)}.msr\\:gap-1{gap:calc(var(--msr-spacing) * 1)}.msr\\:gap-1\\.5{gap:calc(var(--msr-spacing) * 1.5)}.msr\\:gap-2{gap:calc(var(--msr-spacing) * 2)}.msr\\:gap-\\[2px\\]{gap:2px}.msr\\:gap-px{gap:1px}.msr\\:self-center{align-self:center}.msr\\:justify-self-end{justify-self:flex-end}.msr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.msr\\:overflow-hidden{overflow:hidden}.msr\\:overflow-visible{overflow:visible}.msr\\:overflow-y-auto{overflow-y:auto}.msr\\:rounded{border-radius:.25rem}.msr\\:rounded-\\[2px\\]{border-radius:2px}.msr\\:rounded-\\[3px\\]{border-radius:3px}.msr\\:rounded-\\[4px\\]{border-radius:4px}.msr\\:rounded-\\[10px\\]{border-radius:10px}.msr\\:rounded-full{border-radius:3.40282e38px}.msr\\:rounded-lg{border-radius:var(--msr-radius-lg)}.msr\\:rounded-md{border-radius:var(--msr-radius-md)}.msr\\:rounded-none{border-radius:0}.msr\\:border{border-style:var(--tw-border-style);border-width:1px}.msr\\:border-0{border-style:var(--tw-border-style);border-width:0}.msr\\:border-2{border-style:var(--tw-border-style);border-width:2px}.msr\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.msr\\:border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.msr\\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.msr\\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.msr\\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.msr\\:border-dashed{--tw-border-style:dashed;border-style:dashed}.msr\\:border-dotted{--tw-border-style:dotted;border-style:dotted}.msr\\:border-solid{--tw-border-style:solid;border-style:solid}.msr\\:border-\\[\\#0d99ff\\]{border-color:#0d99ff}.msr\\:border-\\[\\#2563eb\\]\\/70{border-color:oklab(54.615% -.026671 -.213549/.7)}.msr\\:border-\\[var\\(--msr-danger-border\\)\\]{border-color:var(--msr-danger-border)}.msr\\:border-black\\/10{border-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:border-black\\/10{border-color:color-mix(in oklab, var(--msr-color-black) 10%, transparent)}}.msr\\:border-ink-100{border-color:var(--msr-color-ink-100)}.msr\\:border-ink-200{border-color:var(--msr-color-ink-200)}.msr\\:border-ink-300{border-color:var(--msr-color-ink-300)}.msr\\:border-ink-500,.msr\\:border-ink-500\\/30{border-color:var(--msr-color-ink-500)}@supports (color:color-mix(in lab, red, red)){.msr\\:border-ink-500\\/30{border-color:color-mix(in oklab, var(--msr-color-ink-500) 30%, transparent)}}.msr\\:border-ink-700{border-color:var(--msr-color-ink-700)}.msr\\:border-transparent{border-color:#0000}.msr\\:border-white{border-color:var(--msr-color-white)}.msr\\:\\!bg-black\\/50{background-color:var(--msr-color-black)!important}@supports (color:color-mix(in lab, red, red)){.msr\\:\\!bg-black\\/50{background-color:color-mix(in oklab, var(--msr-color-black) 50%, transparent)!important}}.msr\\:bg-\\[\\#0d99ff\\]{background-color:#0d99ff}.msr\\:bg-\\[\\#0d99ff\\]\\/8{background-color:oklab(66.9841% -.0648249 -.170866/.08)}.msr\\:bg-\\[\\#0d99ff\\]\\/10{background-color:oklab(66.9841% -.0648249 -.170866/.1)}.msr\\:bg-\\[\\#2563eb\\]{background-color:#2563eb}.msr\\:bg-\\[var\\(--msr-danger-solid-bg\\)\\]{background-color:var(--msr-danger-solid-bg)}.msr\\:bg-black,.msr\\:bg-black\\/4{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-black\\/4{background-color:color-mix(in oklab, var(--msr-color-black) 4%, transparent)}}.msr\\:bg-black\\/40{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-black\\/40{background-color:color-mix(in oklab, var(--msr-color-black) 40%, transparent)}}.msr\\:bg-black\\/80{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-black\\/80{background-color:color-mix(in oklab, var(--msr-color-black) 80%, transparent)}}.msr\\:bg-ink-50{background-color:var(--msr-color-ink-50)}.msr\\:bg-ink-100{background-color:var(--msr-color-ink-100)}.msr\\:bg-ink-200{background-color:var(--msr-color-ink-200)}.msr\\:bg-ink-300{background-color:var(--msr-color-ink-300)}.msr\\:bg-ink-500\\/50{background-color:var(--msr-color-ink-500)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-ink-500\\/50{background-color:color-mix(in oklab, var(--msr-color-ink-500) 50%, transparent)}}.msr\\:bg-ink-900,.msr\\:bg-ink-900\\/90{background-color:var(--msr-color-ink-900)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-ink-900\\/90{background-color:color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent)}}.msr\\:bg-transparent{background-color:#0000}.msr\\:bg-white,.msr\\:bg-white\\/5{background-color:var(--msr-color-white)}@supports (color:color-mix(in lab, red, red)){.msr\\:bg-white\\/5{background-color:color-mix(in oklab, var(--msr-color-white) 5%, transparent)}}.msr\\:object-contain{object-fit:contain}.msr\\:p-0{padding:calc(var(--msr-spacing) * 0)}.msr\\:p-1{padding:calc(var(--msr-spacing) * 1)}.msr\\:p-2{padding:calc(var(--msr-spacing) * 2)}.msr\\:p-3{padding:calc(var(--msr-spacing) * 3)}.msr\\:p-\\[2px\\]{padding:2px}.msr\\:p-px{padding:1px}.msr\\:px-0{padding-inline:calc(var(--msr-spacing) * 0)}.msr\\:px-0\\.5{padding-inline:calc(var(--msr-spacing) * .5)}.msr\\:px-1{padding-inline:calc(var(--msr-spacing) * 1)}.msr\\:px-1\\.5{padding-inline:calc(var(--msr-spacing) * 1.5)}.msr\\:px-2{padding-inline:calc(var(--msr-spacing) * 2)}.msr\\:px-3{padding-inline:calc(var(--msr-spacing) * 3)}.msr\\:py-0\\.5{padding-block:calc(var(--msr-spacing) * .5)}.msr\\:py-1{padding-block:calc(var(--msr-spacing) * 1)}.msr\\:py-1\\.5{padding-block:calc(var(--msr-spacing) * 1.5)}.msr\\:py-2{padding-block:calc(var(--msr-spacing) * 2)}.msr\\:py-6{padding-block:calc(var(--msr-spacing) * 6)}.msr\\:pt-1\\.5{padding-top:calc(var(--msr-spacing) * 1.5)}.msr\\:pt-8{padding-top:calc(var(--msr-spacing) * 8)}.msr\\:pr-1\\.5{padding-right:calc(var(--msr-spacing) * 1.5)}.msr\\:pr-2{padding-right:calc(var(--msr-spacing) * 2)}.msr\\:pr-6{padding-right:calc(var(--msr-spacing) * 6)}.msr\\:pb-1{padding-bottom:calc(var(--msr-spacing) * 1)}.msr\\:pb-2{padding-bottom:calc(var(--msr-spacing) * 2)}.msr\\:pl-1{padding-left:calc(var(--msr-spacing) * 1)}.msr\\:pl-1\\.5{padding-left:calc(var(--msr-spacing) * 1.5)}.msr\\:pl-3{padding-left:calc(var(--msr-spacing) * 3)}.msr\\:pl-6{padding-left:calc(var(--msr-spacing) * 6)}.msr\\:text-center{text-align:center}.msr\\:text-left{text-align:left}.msr\\:text-right{text-align:right}.msr\\:font-mono{font-family:var(--msr-font-mono)}.msr\\:text-\\[9px\\]{font-size:9px}.msr\\:text-\\[10px\\]{font-size:10px}.msr\\:text-\\[11px\\]{font-size:11px}.msr\\:text-\\[12px\\]{font-size:12px}.msr\\:text-\\[13px\\]{font-size:13px}.msr\\:text-\\[16px\\]{font-size:16px}.msr\\:leading-4{--tw-leading:calc(var(--msr-spacing) * 4);line-height:calc(var(--msr-spacing) * 4)}.msr\\:leading-5{--tw-leading:calc(var(--msr-spacing) * 5);line-height:calc(var(--msr-spacing) * 5)}.msr\\:leading-6{--tw-leading:calc(var(--msr-spacing) * 6);line-height:calc(var(--msr-spacing) * 6)}.msr\\:leading-none{--tw-leading:1;line-height:1}.msr\\:font-medium{--tw-font-weight:var(--msr-font-weight-medium);font-weight:var(--msr-font-weight-medium)}.msr\\:font-normal{--tw-font-weight:var(--msr-font-weight-normal);font-weight:var(--msr-font-weight-normal)}.msr\\:font-semibold{--tw-font-weight:var(--msr-font-weight-semibold);font-weight:var(--msr-font-weight-semibold)}.msr\\:text-pretty{text-wrap:pretty}.msr\\:break-words{overflow-wrap:break-word}.msr\\:whitespace-normal{white-space:normal}.msr\\:whitespace-nowrap{white-space:nowrap}.msr\\:whitespace-pre{white-space:pre}.msr\\:whitespace-pre-wrap{white-space:pre-wrap}.msr\\:text-\\[\\#64748b\\]{color:#64748b}.msr\\:text-\\[var\\(--msr-danger-solid-text\\)\\]{color:var(--msr-danger-solid-text)}.msr\\:text-\\[var\\(--msr-danger-text\\)\\]{color:var(--msr-danger-text)}.msr\\:text-ink-50{color:var(--msr-color-ink-50)}.msr\\:text-ink-500{color:var(--msr-color-ink-500)}.msr\\:text-ink-700{color:var(--msr-color-ink-700)}.msr\\:text-ink-900{color:var(--msr-color-ink-900)}.msr\\:text-red-600{color:var(--msr-color-red-600)}.msr\\:text-white,.msr\\:text-white\\/60{color:var(--msr-color-white)}@supports (color:color-mix(in lab, red, red)){.msr\\:text-white\\/60{color:color-mix(in oklab, var(--msr-color-white) 60%, transparent)}}.msr\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.msr\\:underline-offset-2{text-underline-offset:2px}.msr\\:caret-\\[\\#0d99ff\\]{caret-color:#0d99ff}.msr\\:opacity-0{opacity:0}.msr\\:opacity-100{opacity:1}.msr\\:shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:shadow-\\[0_1px_2px_rgb\\(0_0_0_\\/_0\\.06\\)\\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:shadow-floating{--tw-shadow:0 0 .4px var(--tw-shadow-color,#00000038), 0 6px 18px var(--tw-shadow-color,#00000008), 0 3px 9px var(--tw-shadow-color,#0000000f), 0 1px 1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:outline,.msr\\:outline-1{outline-style:var(--tw-outline-style);outline-width:1px}.msr\\:outline-\\[\\#0d99ff\\]{outline-color:#0d99ff}.msr\\:drop-shadow-\\[0_1px_2px_rgba\\(0\\,0\\,0\\,0\\.8\\)\\]{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#000c));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.msr\\:transition-\\[height\\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[left\\]{transition-property:left;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[max-height\\]{transition-property:max-height;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-\\[width\\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--msr-default-transition-timing-function));transition-duration:var(--tw-duration,var(--msr-default-transition-duration))}.msr\\:transition-none{transition-property:none}.msr\\:duration-150{--tw-duration:.15s;transition-duration:.15s}.msr\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.msr\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.msr\\:ease-\\[cubic-bezier\\(0\\.22\\,1\\,0\\.36\\,1\\)\\]{--tw-ease:cubic-bezier(.22,1,.36,1);transition-timing-function:cubic-bezier(.22,1,.36,1)}.msr\\:ease-\\[ease\\]{--tw-ease:ease;transition-timing-function:ease}.msr\\:will-change-transform{will-change:transform}.msr\\:outline-none{--tw-outline-style:none;outline-style:none}.msr\\:select-none{-webkit-user-select:none;user-select:none}.msr\\:select-text{-webkit-user-select:text;user-select:text}@media (hover:hover){.msr\\:group-hover\\:h-3:is(:where(.msr\\:group):hover *){height:calc(var(--msr-spacing) * 3)}.msr\\:group-hover\\:opacity-100:is(:where(.msr\\:group):hover *){opacity:1}.msr\\:group-hover\\/video\\:pointer-events-auto:is(:where(.msr\\:group\\/video):hover *){pointer-events:auto}.msr\\:group-hover\\/video\\:opacity-100:is(:where(.msr\\:group\\/video):hover *){opacity:1}}.msr\\:group-focus-visible\\:h-3:is(:where(.msr\\:group):focus-visible *){height:calc(var(--msr-spacing) * 3)}.msr\\:focus-within\\:pointer-events-auto:focus-within{pointer-events:auto}.msr\\:focus-within\\:relative:focus-within{position:relative}.msr\\:focus-within\\:z-\\[1\\]:focus-within{z-index:1}.msr\\:focus-within\\:rounded-l-\\[5px\\]:focus-within{border-top-left-radius:5px;border-bottom-left-radius:5px}.msr\\:focus-within\\:rounded-r-\\[5px\\]:focus-within{border-top-right-radius:5px;border-bottom-right-radius:5px}.msr\\:focus-within\\:border-\\[\\#0d99ff\\]:focus-within{border-color:#0d99ff}.msr\\:focus-within\\:opacity-100:focus-within{opacity:1}.msr\\:focus-within\\:shadow-\\[0_0_0_1px_\\#0d99ff\\]:focus-within{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#0d99ff);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.msr\\:hover\\:border-ink-200:hover{border-color:var(--msr-color-ink-200)}.msr\\:hover\\:\\!bg-black\\/60:hover{background-color:var(--msr-color-black)!important}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:\\!bg-black\\/60:hover{background-color:color-mix(in oklab, var(--msr-color-black) 60%, transparent)!important}}.msr\\:hover\\:bg-\\[\\#0d99ff\\]:hover{background-color:#0d99ff}.msr\\:hover\\:bg-\\[\\#087dcc\\]:hover{background-color:#087dcc}.msr\\:hover\\:bg-\\[var\\(--msr-danger-bg\\)\\]:hover{background-color:var(--msr-danger-bg)}.msr\\:hover\\:bg-\\[var\\(--msr-danger-solid-hover\\)\\]:hover{background-color:var(--msr-danger-solid-hover)}.msr\\:hover\\:bg-black\\/4:hover{background-color:var(--msr-color-black)}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:bg-black\\/4:hover{background-color:color-mix(in oklab, var(--msr-color-black) 4%, transparent)}}.msr\\:hover\\:bg-ink-50:hover{background-color:var(--msr-color-ink-50)}.msr\\:hover\\:bg-ink-100:hover{background-color:var(--msr-color-ink-100)}.msr\\:hover\\:bg-ink-200:hover,.msr\\:hover\\:bg-ink-200\\/50:hover{background-color:var(--msr-color-ink-200)}@supports (color:color-mix(in lab, red, red)){.msr\\:hover\\:bg-ink-200\\/50:hover{background-color:color-mix(in oklab, var(--msr-color-ink-200) 50%, transparent)}}.msr\\:hover\\:bg-red-50:hover{background-color:var(--msr-color-red-50)}.msr\\:hover\\:bg-transparent:hover{background-color:#0000}.msr\\:hover\\:text-ink-700:hover{color:var(--msr-color-ink-700)}.msr\\:hover\\:text-ink-900:hover{color:var(--msr-color-ink-900)}.msr\\:hover\\:text-white:hover{color:var(--msr-color-white)}.msr\\:hover\\:underline:hover{text-decoration-line:underline}.msr\\:hover\\:focus-within\\:border-\\[\\#0d99ff\\]:hover:focus-within{border-color:#0d99ff}}.msr\\:focus\\:border-\\[\\#0d99ff\\]:focus{border-color:#0d99ff}.msr\\:focus\\:shadow-\\[inset_0_0_0_1px_\\#0d99ff\\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,#0d99ff);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.msr\\:focus-visible\\:bg-ink-100:focus-visible{background-color:var(--msr-color-ink-100)}.msr\\:focus-visible\\:opacity-100:focus-visible{opacity:1}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--color-ink-700\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--color-ink-700));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-accent\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-accent));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:shadow-\\[inset_0_0_0_1px_var\\(--msr-danger-text\\)\\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--msr-danger-text));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible{--tw-ring-color:var(--msr-accent)}@supports (color:color-mix(in lab, red, red)){.msr\\:focus-visible\\:ring-\\[var\\(--msr-accent\\)\\]\\/25:focus-visible{--tw-ring-color:color-mix(in oklab, var(--msr-accent) 25%, transparent)}}.msr\\:focus-visible\\:outline:focus-visible,.msr\\:focus-visible\\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.msr\\:focus-visible\\:outline-offset-1:focus-visible{outline-offset:1px}.msr\\:focus-visible\\:outline-ink-500:focus-visible{outline-color:var(--msr-color-ink-500)}.msr\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.msr\\:focus-visible\\:ring-inset:focus-visible{--tw-ring-inset:inset}.msr\\:disabled\\:cursor-default:disabled{cursor:default}.msr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.msr\\:disabled\\:opacity-40:disabled{opacity:.4}@media (prefers-reduced-motion:reduce){.msr\\:motion-reduce\\:transition-none{transition-property:none}}.msr\\:rounded-control{border-radius:var(--msr-radius-control)}.msr\\:rounded-wide-card{border-radius:var(--msr-radius-wide-card)}}:root,:host{--color-ink-50:#f8fafc;--color-ink-100:#f1f5f9;--color-ink-200:#e2e8f0;--color-ink-300:#cbd5e1;--color-ink-500:#64748b;--color-ink-700:#334155;--color-ink-900:#18181b}:host{all:initial;color-scheme:light dark;color:var(--msr-color-ink-900);letter-spacing:normal;--msr-spacing:4px;direction:ltr;font-family:ui-sans-serif,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;display:block}.mesurer-root{--msr-accent:#0d99ff;--msr-surface:#fff;--msr-surface-raised:#fff;--msr-surface-muted:var(--msr-color-ink-50);--msr-content:var(--msr-color-ink-900);--msr-color-white:#fff;--msr-color-black:#000;--msr-danger-bg:#fef2f2;--msr-danger-border:#fecaca;--msr-danger-text:#dc2626;--msr-danger-solid-bg:#dc2626;--msr-danger-solid-hover:#b91c1c;--msr-danger-solid-text:#fff;--msr-control-thumb:#fff;--msr-slider-track:#0f172a29;--msr-shadow-toolbar:drop-shadow(0 0 .4px #00000038) drop-shadow(0 6px 18px #00000008) drop-shadow(0 3px 9px #0000000f) drop-shadow(0 1px 1px #0000000f);--msr-shadow-floating:0 0 .4px #00000038, 0 6px 18px #00000008, 0 3px 9px #0000000f, 0 1px 1px #0000000f;--msr-shadow-select-menu:var(--msr-shadow-floating);--msr-comment-menu-surface:var(--msr-surface-raised);--msr-shadow-comment-menu:var(--msr-shadow-select-menu);color:var(--msr-content);color-scheme:light}.mesurer-root [class~=msr\\:bg-white]{background-color:var(--msr-surface)!important}.mesurer-root [class~="msr:bg-[#0d99ff]"],.mesurer-root [class~="msr:hover:bg-[#0d99ff]"]:hover{background-color:var(--msr-accent)!important}.mesurer-root [class~="msr:border-[#0d99ff]"]{border-color:var(--msr-accent)!important}.mesurer-root [class~="msr:bg-[#0d99ff]/8"]{background-color:var(--msr-accent)!important}@supports (color:color-mix(in lab, red, red)){.mesurer-root [class~="msr:bg-[#0d99ff]/8"]{background-color:color-mix(in srgb, var(--msr-accent) 8%, transparent)!important}}.mesurer-root [class~=msr\\:text-black]{color:var(--msr-content)!important}.mesurer-root .mesurer-control-thumb{background-color:var(--msr-control-thumb)!important}.mesurer-root button{-webkit-user-select:none;user-select:none;cursor:default!important}.mesurer-root .mesurer-settings-button-ghost{opacity:.7}.mesurer-root .mesurer-settings-button-ghost:hover,.mesurer-root .mesurer-settings-button-ghost:focus-visible{opacity:1}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-track-rail{background-color:var(--msr-color-ink-200)}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-track-clip{background-color:var(--msr-color-ink-300)}.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-playhead,.mesurer-root [data-mesurer-recording-timeline] .mesurer-recording-trim-bar{background-color:var(--msr-color-ink-900)}.mesurer-root .mesurer-switch-thumb[data-checked=false]{background-color:var(--msr-color-ink-200)!important}.mesurer-root [class~="msr:hover:bg-black/4"]:hover,.mesurer-root [class~="msr:hover:bg-black/5"]:hover{background-color:var(--msr-content)!important}@supports (color:color-mix(in lab, red, red)){.mesurer-root [class~="msr:hover:bg-black/4"]:hover,.mesurer-root [class~="msr:hover:bg-black/5"]:hover{background-color:color-mix(in srgb, var(--msr-content) 6%, transparent)!important}}.mesurer-root .mesurer-menu-surface,.mesurer-root .mesurer-color-picker{border-radius:9px}.mesurer-root .mesurer-menu-surface,.mesurer-root .mesurer-color-picker,.mesurer-root .mesurer-comment-card,.mesurer-root .mesurer-comment-hover-card,.mesurer-root .mesurer-comment-delete-confirmation{color:var(--msr-content);background-color:var(--msr-surface-raised)!important}.mesurer-root .mesurer-section-divider{background-color:var(--msr-color-ink-200)!important}.mesurer-root .mesurer-settings-select-menu{box-shadow:var(--msr-shadow-select-menu)}.mesurer-root .mesurer-comment-overflow-menu,.mesurer-root .mesurer-comment-delete-confirmation{box-shadow:var(--msr-shadow-comment-menu);background-color:var(--msr-comment-menu-surface)!important}.mesurer-root .mesurer-comment-menu-item:hover{background-color:var(--msr-color-ink-200)!important}.mesurer-root .mesurer-comment-menu-danger{color:var(--msr-danger-text)!important}.mesurer-root .mesurer-comment-menu-danger:hover{background-color:var(--msr-danger-bg)!important}.mesurer-root .mesurer-settings-button-default{background-color:#0000}.mesurer-root .mesurer-settings-button-default:hover{background-color:var(--msr-color-ink-50)}.mesurer-root[data-theme=dark] .mesurer-control-shell{background-color:var(--msr-color-ink-100)}.mesurer-root[data-theme=dark] .mesurer-settings-panel select,.mesurer-root[data-theme=dark] .mesurer-settings-select,.mesurer-root[data-theme=dark] .mesurer-settings-select-menu{background-color:var(--msr-surface-raised)!important;border-color:var(--msr-color-ink-200)!important}.mesurer-root[data-theme=dark] .mesurer-settings-button-default:hover{background-color:var(--msr-surface)!important}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system] .mesurer-control-shell{background-color:var(--msr-color-ink-100)}.mesurer-root[data-theme=system] .mesurer-settings-panel select,.mesurer-root[data-theme=system] .mesurer-settings-select,.mesurer-root[data-theme=system] .mesurer-settings-select-menu{background-color:var(--msr-surface-raised)!important;border-color:var(--msr-color-ink-200)!important}.mesurer-root[data-theme=system] .mesurer-settings-button-default:hover{background-color:var(--msr-surface)!important}}.mesurer-root[data-theme=dark] .mesurer-switch-track[data-checked=false]{background-color:var(--msr-color-ink-100)!important}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system] .mesurer-switch-track[data-checked=false]{background-color:var(--msr-color-ink-100)!important}}.mesurer-root .mesurer-settings-panel .mesurer-control-focus :is(input,select):focus{box-shadow:none!important;outline:none!important}.mesurer-root[data-theme=dark]{--msr-accent:#0c8ce9;--msr-color-red-50:#3f2020;--msr-color-red-200:#7f3f46;--msr-color-red-600:#f87171;--msr-color-red-700:#fca5a5;--msr-danger-bg:#3f2020;--msr-danger-border:#7f3f46;--msr-danger-text:#f87171;--msr-danger-solid-bg:#c95058;--msr-danger-solid-hover:#b7424b;--msr-danger-solid-text:#f5f5f5;--msr-color-ink-50:#3a3a3a;--msr-color-ink-100:#414141;--msr-color-ink-200:#4a4a4a;--msr-color-ink-300:#5a5a5a;--msr-color-ink-500:#a0a0a0;--msr-color-ink-700:#dedede;--msr-color-ink-900:#f5f5f5;--msr-surface:#323232;--msr-surface-raised:#3a3a3a;--msr-surface-muted:#3a3a3a;--msr-color-white:#f5f5f5;--msr-color-black:#171717;--msr-control-thumb:#f4f4f5;--msr-slider-track:#f5f5f53d;--msr-shadow-toolbar:drop-shadow(0 0 .4px lch(100% 0 0/.1)) drop-shadow(0 3px 8px lch(0% 0 0/.125)) drop-shadow(0 2px 5px lch(0% 0 0/.125)) drop-shadow(0 1px 1px lch(0% 0 0/.125));--msr-shadow-floating:0 0 .4px lch(100% 0 0/.1), 0 3px 8px lch(0% 0 0/.125), 0 2px 5px lch(0% 0 0/.125), 0 1px 1px lch(0% 0 0/.125);--msr-shadow-select-menu:0 0 0 .4px lch(100% 0 0/.14), 0 4px 12px lch(0% 0 0/.22), 0 1px 3px lch(0% 0 0/.18);--msr-comment-menu-surface:#323232;--msr-shadow-comment-menu:0 0 0 .5px lch(100% 0 0/.16), 0 5px 14px lch(0% 0 0/.26), 0 1px 3px lch(0% 0 0/.18);color-scheme:dark}@media (prefers-color-scheme:dark){.mesurer-root[data-theme=system]{--msr-accent:#0c8ce9;--msr-color-red-50:#3f2020;--msr-color-red-200:#7f3f46;--msr-color-red-600:#f87171;--msr-color-red-700:#fca5a5;--msr-danger-bg:#3f2020;--msr-danger-border:#7f3f46;--msr-danger-text:#f87171;--msr-danger-solid-bg:#c95058;--msr-danger-solid-hover:#b7424b;--msr-danger-solid-text:#f5f5f5;--msr-color-ink-50:#3a3a3a;--msr-color-ink-100:#414141;--msr-color-ink-200:#4a4a4a;--msr-color-ink-300:#5a5a5a;--msr-color-ink-500:#a0a0a0;--msr-color-ink-700:#dedede;--msr-color-ink-900:#f5f5f5;--msr-surface:#323232;--msr-surface-raised:#3a3a3a;--msr-surface-muted:#3a3a3a;--msr-color-white:#f5f5f5;--msr-color-black:#171717;--msr-control-thumb:#f4f4f5;--msr-slider-track:#f5f5f53d;--msr-shadow-toolbar:drop-shadow(0 0 .4px lch(100% 0 0/.1)) drop-shadow(0 3px 8px lch(0% 0 0/.125)) drop-shadow(0 2px 5px lch(0% 0 0/.125)) drop-shadow(0 1px 1px lch(0% 0 0/.125));--msr-shadow-floating:0 0 .4px lch(100% 0 0/.1), 0 3px 8px lch(0% 0 0/.125), 0 2px 5px lch(0% 0 0/.125), 0 1px 1px lch(0% 0 0/.125);--msr-shadow-select-menu:0 0 0 .4px lch(100% 0 0/.14), 0 4px 12px lch(0% 0 0/.22), 0 1px 3px lch(0% 0 0/.18);--msr-comment-menu-surface:#323232;--msr-shadow-comment-menu:0 0 0 .5px lch(100% 0 0/.16), 0 5px 14px lch(0% 0 0/.26), 0 1px 3px lch(0% 0 0/.18);color-scheme:dark}}.mesurer-color-picker,.mesurer-color-picker *,.mesurer-root [data-mesurer-inspect-info-card],.mesurer-root [data-mesurer-inspect-info-card] *,[data-mesurer-overlay][data-mesurer-inspect],[data-mesurer-overlay][data-mesurer-inspect] *{cursor:default!important}.mesurer-root button[data-mesurer-resize-cursor],.mesurer-root button[data-mesurer-resize-cursor] *,[data-mesurer-overlay][data-mesurer-inspect] [data-mesurer-resize-cursor],[data-mesurer-overlay][data-mesurer-inspect] [data-mesurer-resize-cursor] *{cursor:var(--msr-resize-cursor)!important}html[data-mesurer-resize-cursor],html[data-mesurer-resize-cursor] *,html[data-mesurer-resize-cursor] [data-mesurer-overlay][data-mesurer-inspect],html[data-mesurer-resize-cursor] [data-mesurer-overlay][data-mesurer-inspect] *,.mesurer-root[data-mesurer-resize-cursor],.mesurer-root[data-mesurer-resize-cursor] *{cursor:var(--msr-resize-cursor-lock)!important}.mesurer-root,.mesurer-root *,.mesurer-root :before,.mesurer-root :after{box-sizing:border-box}.mesurer-toolbar-motion{--msr-toolbar-motion:.2s ease;z-index:0;isolation:isolate;width:max-content;max-width:100%;display:block;position:relative}.mesurer-layout-guides,.mesurer-layout-guides-layer,.mesurer-layout-guides-grid{pointer-events:none;position:absolute;inset:0}.mesurer-layout-guides{z-index:2;overflow:hidden}.mesurer-toolbar-chrome{z-index:0;background:var(--msr-surface);width:100%;filter:var(--msr-shadow-toolbar);transform-origin:0;pointer-events:none;border-radius:9px;position:absolute;inset:0 auto 0 0;overflow:visible}.mesurer-toolbar-clip{z-index:1;isolation:isolate;transform-origin:0;position:relative;overflow:visible}.mesurer-toolbar-motion[data-resizing=collapse] .mesurer-toolbar-clip{overflow:hidden}.mesurer-toolbar-motion[data-resizing] .mesurer-toolbar-tooltips{visibility:hidden!important}.mesurer-toolbar-surface{transform-origin:0;padding:0;position:relative}.mesurer-toolbar-divider{background:var(--msr-color-ink-200);flex:none;align-self:stretch;width:1px;margin:0}.mesurer-toolbar-minimize-stage{min-width:0;width:var(--msr-expanded-w,auto);flex:none;overflow:visible}.mesurer-toolbar-minimize-stage[data-minimized=true]{width:var(--msr-icon-w,auto);overflow:hidden}.mesurer-toolbar-motion[data-resizing=collapse] .mesurer-toolbar-minimize-stage{overflow:hidden}.mesurer-toolbar-minimize-stage[data-minimized=true] .mesurer-toolbar-minimize-track{transform:translateX(calc(-1 * var(--msr-expanded-w,0px)))}.mesurer-toolbar-minimize-stage:has([role=dialog]),.mesurer-toolbar-minimize-stage:has([role=menu]),.mesurer-toolbar-minimize-stage:has(.mesurer-screenshot-preview){overflow:visible}.mesurer-toolbar-minimize-track{pointer-events:none;flex:none;display:flex;transform:translate(0)}.mesurer-toolbar-minimize-slot{flex:none}.mesurer-toolbar-minimize-slot[data-slot=expanded]{width:var(--msr-expanded-w,auto)}.mesurer-toolbar-minimize-slot[data-slot=icon]{width:auto}.mesurer-toolbar-minimize-slot:not([data-open=true]){pointer-events:none}.mesurer-toolbar-minimize-slot[data-open=true]{pointer-events:auto}.mesurer-toolbar-motion:not([data-resizing=collapse]) .mesurer-toolbar-minimize-slot[data-slot=icon]:not([data-open=true]){visibility:hidden}.mesurer-toolbar-restore svg{transform:translate(-.5px,.5px)}.mesurer-toolbar-tool-stage{min-width:0;width:var(--msr-inspect-w,auto);flex:none;overflow:hidden}.mesurer-toolbar-tool-stage[data-group=annotate]{width:var(--msr-annotate-w,auto)}.mesurer-toolbar-tool-stage[data-group=annotate] .mesurer-toolbar-tool-track{transform:translateX(calc(-1 * var(--msr-inspect-w,0px)))}.mesurer-toolbar-tool-stage:has([role=menu]),.mesurer-toolbar-tool-stage:has([role=dialog]){overflow:visible}.mesurer-toolbar-motion[data-resizing=true] .mesurer-toolbar-tool-stage{overflow:hidden}.mesurer-toolbar-tool-track{flex:none;display:flex;transform:translate(0)}.mesurer-toolbar-motion[data-ready=true] .mesurer-toolbar-tool-switch-pill{transition:transform var(--msr-toolbar-motion)}.mesurer-toolbar-tool-slot{flex:none}.mesurer-toolbar-tool-slot[data-group=inspect]{width:var(--msr-inspect-w,auto)}.mesurer-toolbar-tool-slot[data-group=annotate]{width:var(--msr-annotate-w,auto)}.mesurer-toolbar-tool-slot:not([data-open=true]){pointer-events:none}.mesurer-toolbar-motion:not([data-resizing]) .mesurer-toolbar-tool-slot:not([data-open=true]){visibility:hidden}.mesurer-toolbar-tool-panel{width:max-content}.mesurer-toolbar-tooltips{z-index:110;pointer-events:none;position:fixed;inset:0;overflow:visible}.mesurer-toolbar-trailing{z-index:1;isolation:isolate;background:var(--msr-surface);border-radius:0 9px 9px 0;flex:none;position:relative}.mesurer-toolbar-tool-switch{z-index:1;isolation:isolate;background:var(--msr-surface);position:relative}.mesurer-toolbar-tool-switch-pill{z-index:0;background:var(--msr-color-ink-200);border-radius:3px;width:28px;height:28px;position:absolute;top:2px;left:2px;transform:translate(0)}.mesurer-toolbar-tool-switch[data-value=annotate] .mesurer-toolbar-tool-switch-pill{transform:translate(30px)}.mesurer-toolbar-tool-switch>:not(.mesurer-toolbar-tool-switch-pill){z-index:1;position:relative}@media (prefers-reduced-motion:reduce){.mesurer-toolbar-motion,.mesurer-toolbar-chrome,.mesurer-toolbar-tool-track,.mesurer-toolbar-minimize-track,.mesurer-toolbar-trailing,.mesurer-toolbar-motion[data-ready=true] .mesurer-toolbar-tool-switch-pill{transition:none}.mesurer-screenshot-preview{animation-name:mesurer-screenshot-preview-reduced;animation-duration:5s;animation-timing-function:linear;animation-fill-mode:both}}@keyframes mesurer-screenshot-preview{0%,3.1%{opacity:0}6.2%,96.9%{opacity:1}to{opacity:0}}@keyframes mesurer-screenshot-preview-reduced{0%,to{opacity:1}}@keyframes mesurer-comment-nudge{0%,to{transform:translate(0)}35%{transform:translate(-3px)}70%{transform:translate(3px)}}.mesurer-comment-nudge{animation:.15s ease-out mesurer-comment-nudge}@keyframes mesurer-status-ellipsis{0%,24%{content:""}25%,49%{content:"."}50%,74%{content:".."}75%,to{content:"..."}}.mesurer-status-ellipsis{text-align:left;width:1.5em;display:inline-block}.mesurer-status-ellipsis:after{content:"";animation:1.2s step-end infinite mesurer-status-ellipsis}@media (prefers-reduced-motion:reduce){.mesurer-status-ellipsis:after{content:"...";animation:none}}.mesurer-thin-scrollbar{scrollbar-width:thin;scrollbar-color:var(--msr-color-ink-200) transparent}.mesurer-thin-scrollbar::-webkit-scrollbar{width:4px;height:4px}.mesurer-thin-scrollbar::-webkit-scrollbar-track{background:0 0}.mesurer-thin-scrollbar::-webkit-scrollbar-thumb{background:var(--msr-color-ink-200);border-radius:var(--msr-radius-control)}.mesurer-thin-scrollbar:hover{scrollbar-color:var(--msr-color-ink-300) transparent}.mesurer-thin-scrollbar:hover::-webkit-scrollbar-thumb{background:var(--msr-color-ink-300)}.mesurer-thin-scrollbar::-webkit-scrollbar-corner{background:0 0}.mesurer-toast-surface{box-shadow:var(--msr-shadow-floating)}.mesurer-root{--msr-spacing:4px}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}';
 // mesurer-client.tsx
 import {
@@ -67,7 +78,7 @@ import { useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState
 // package.json
 var package_default = {
   name: "mesurer",
-  version: "0.2.2",
+  version: "0.2.3",
   description: "Inspect, annotate, and give feedback on any live interface",
   license: "MIT",
   author: "Julien Thibeaut",
@@ -1687,7 +1698,7 @@ function SettingsPanel({
   color,
   camera,
   rulers,
-  text,
+  text: text2,
   arrows,
   focusSection,
   general
@@ -1707,7 +1718,7 @@ function SettingsPanel({
   } = general;
   const { settings: screenshotSettings, setSettings: setScreenshotSettings } = camera;
   const { settings: rulerSettings, setSettings: setRulerSettings } = rulers;
-  const { settings: textSettings, setSettings: setTextSettings } = text;
+  const { settings: textSettings, setSettings: setTextSettings } = text2;
   const {
     color: arrowColor,
     setColor: setArrowColor,
@@ -2859,8 +2870,8 @@ var scaledFont = (scale) => ({
   fontSize: `${BASE_FONT_SIZE * scale}px`,
   lineHeight: `${BASE_LINE_HEIGHT * scale}px`
 });
-var scaleBox = (box, handle, pointer) => {
-  const { x, y, width, height, rotation, scale, boxWidth } = box;
+var scaleBox = (box2, handle, pointer) => {
+  const { x, y, width, height, rotation, scale, boxWidth } = box2;
   const center = boxCenter(x, y, width, height);
   const localPointer = rotatePoint(pointer, center, -rotation);
   const { ax, ay } = ANCHOR[handle];
@@ -2891,8 +2902,8 @@ var scaleBox = (box, handle, pointer) => {
     ...typeof boxWidth === "number" ? { boxWidth: Math.max(MIN_BOX_WIDTH, boxWidth * applied) } : {}
   };
 };
-var resizeWidthBox = (box, handle, pointer) => {
-  const { x, y, width, height, rotation } = box;
+var resizeWidthBox = (box2, handle, pointer) => {
+  const { x, y, width, height, rotation } = box2;
   const center = boxCenter(x, y, width, height);
   const localPointer = rotatePoint(pointer, center, -rotation);
   const { ax } = ANCHOR[handle];
@@ -3353,6 +3364,8 @@ var installKeyboardGate = (view = window, {
       }
       if (event instanceof KeyboardEvent && isMesurerKeyboardBridgeKey(event.key, event)) {
         bridgeKey(event);
+        if (event.type === "keydown") event.preventDefault();
+        return;
       }
       event.preventDefault();
       if (isAnnotationHotkey(event)) return;
@@ -3365,6 +3378,8 @@ var installKeyboardGate = (view = window, {
       if (event.type === "keydown" || event.type === "keyup") {
         if (isolateMesurerEvents && isMesurerKeyboardBridgeKey(event.key, event)) {
           bridgeKey(event);
+          if (event.type === "keydown") event.preventDefault();
+          return;
         }
       }
     }
@@ -4561,21 +4576,26 @@ var MenuSurface = forwardRef3(
     );
   }
 );
-function ToolbarMenu({ className, side, align = "left", children, ...props }) {
+var ToolbarMenu = forwardRef3(function ToolbarMenu2({ className, side, align = "left", floating = false, floatingStyle, style, children, ...props }, ref) {
   return /* @__PURE__ */ jsx38(
     MenuSurface,
     {
       ...props,
+      ref,
+      style: floating ? { ...floatingStyle, ...style } : style,
       className: cn(
-        "msr:absolute msr:z-[100] msr:flex msr:w-44 msr:flex-col msr:gap-px",
-        side === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2",
-        align === "left" ? "msr:left-0" : "msr:right-0",
+        "msr:flex msr:w-44 msr:flex-col msr:gap-px",
+        floating ? "msr:pointer-events-auto msr:fixed msr:z-[120]" : cn(
+          "msr:absolute msr:z-[100]",
+          side === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2",
+          align === "left" ? "msr:left-0" : "msr:right-0"
+        ),
         className
       ),
       children
     }
   );
-}
+});
 function MenuItem({
   className,
   children,
@@ -4706,6 +4726,7 @@ function CommentsPanel({
   panelRef,
   placement,
   fixed = false,
+  fixedZIndex = 100,
   statusFilter,
   onStatusFilterChange
 }) {
@@ -4781,7 +4802,7 @@ function CommentsPanel({
       style: {
         position: fixed ? "fixed" : "absolute",
         width: fixed ? "18rem" : void 0,
-        zIndex: fixed ? 100 : void 0,
+        zIndex: fixed ? fixedZIndex : void 0,
         pointerEvents: "auto",
         right: placement.right,
         top: placement.top,
@@ -4952,7 +4973,7 @@ function CommentsPanel({
             "data-mesurer-comment-actions": true,
             "data-mesurer-comment-ui": true,
             className: "mesurer-comment-overflow-menu msr:pointer-events-auto msr:fixed msr:z-[100] msr:w-32 msr:-translate-y-full msr:rounded-md msr:bg-white msr:p-1 msr:shadow-floating",
-            style: { position: "fixed", zIndex: 100, pointerEvents: "auto", width: "8rem", top: commentMenuPosition.top, right: commentMenuPosition.right },
+            style: { position: "fixed", zIndex: 120, pointerEvents: "auto", width: "8rem", top: commentMenuPosition.top, right: commentMenuPosition.right },
             onPointerDown: (event) => event.stopPropagation(),
             children: /* @__PURE__ */ jsx40("button", { type: "button", role: "menuitem", className: "mesurer-comment-menu-danger msr:flex msr:w-full msr:rounded-[4px] msr:px-2 msr:py-1.5 msr:text-left msr:text-[12px] msr:text-red-600 msr:hover:bg-red-50", onClick: (event) => {
               event.stopPropagation();
@@ -4970,7 +4991,7 @@ function CommentsPanel({
             "data-mesurer-comment-actions": true,
             "data-mesurer-comment-ui": true,
             className: "mesurer-comment-overflow-menu msr:pointer-events-auto msr:fixed msr:z-[100] msr:w-40 msr:rounded-md msr:bg-white msr:p-1 msr:shadow-floating",
-            style: { position: "fixed", zIndex: 100, pointerEvents: "auto", width: "10rem", top: listMenuPosition.top, right: listMenuPosition.right },
+            style: { position: "fixed", zIndex: 120, pointerEvents: "auto", width: "10rem", top: listMenuPosition.top, right: listMenuPosition.right },
             onPointerDown: (event) => event.stopPropagation(),
             children: [
               ["open", "resolved", "all"].map((filter) => /* @__PURE__ */ jsxs28(
@@ -5339,6 +5360,12 @@ var GUIDE_MENU_WIDTH = 176;
 var VIEWPORT_PADDING2 = 8;
 var TOOLBAR_HEIGHT = 40;
 var TOOLTIP_HEIGHT_WITH_GAP = 34;
+var floatingMenuStyle = (placement) => ({
+  zIndex: 120,
+  top: placement.top,
+  bottom: placement.bottom,
+  ...placement.left !== void 0 ? { left: placement.left } : { right: placement.right }
+});
 var getSettingsShortcut = (eventTarget) => /Mac|iPhone|iPad|iPod/.test(eventTarget.navigator.platform) ? "\u2318 ," : "Ctrl + ,";
 var toolGroupForMode = (mode, colorPickerActive) => {
   if (colorPickerActive) return "inspect";
@@ -5730,7 +5757,8 @@ function ToolbarComponent({
     anchorRef: settingsRef,
     eventTarget,
     open: settingsOpen,
-    refreshKey: `${position.x}:${position.y}`
+    refreshKey: `${position.x}:${position.y}`,
+    fixed: true
   });
   const { menuRef: commentsPanelRef, placement: commentsPlacement } = useSettingsMenuPlacement({
     anchorRef: commentButtonRef,
@@ -5740,6 +5768,33 @@ function ToolbarComponent({
     fixed: true
   });
   const recordingPanelOpen = Boolean(screenRecording.panel);
+  const captureAnchorRef = useRef14(null);
+  const colorPickerAnchorRef = useRef14(null);
+  const [colorPickerShell, setColorPickerShell] = useState11(null);
+  const { menuRef: guideMenuPortalRef, placement: guideMenuPortalPlacement } = useSettingsMenuPlacement({
+    anchorRef: guideMenuButtonRef,
+    eventTarget,
+    open: recordingPanelOpen && guideMenuOpen,
+    refreshKey: `${position.x}:${position.y}:${menuAlign}`,
+    fixed: true,
+    align: menuAlign
+  });
+  const { menuRef: captureMenuPortalRef, placement: captureMenuPortalPlacement } = useSettingsMenuPlacement({
+    anchorRef: captureAnchorRef,
+    eventTarget,
+    open: recordingPanelOpen && captureMenuOpen,
+    refreshKey: `${position.x}:${position.y}`,
+    fixed: true,
+    align: "right"
+  });
+  const { menuRef: commentDropdownPortalRef, placement: commentDropdownPlacement } = useSettingsMenuPlacement({
+    anchorRef: commentButtonRef,
+    eventTarget,
+    open: recordingPanelOpen && commentMenuOpen && !commentsPanelOpen,
+    refreshKey: `${position.x}:${position.y}`,
+    fixed: true,
+    align: "right"
+  });
   const { menuRef: recordingPanelRef, placement: recordingPlacement } = useSettingsMenuPlacement({
     anchorRef: settingsRef,
     eventTarget,
@@ -5755,6 +5810,26 @@ function ToolbarComponent({
     refreshKey: `${position.x}:${position.y}`,
     fixed: true
   });
+  useLayoutEffect8(() => {
+    if (!recordingPanelOpen || !colorPickerActive) {
+      setColorPickerShell(null);
+      return;
+    }
+    const place = () => {
+      const anchor = colorPickerAnchorRef.current;
+      const tool = anchor?.querySelector("[data-tool-id='color-picker']") ?? anchor;
+      if (!(tool instanceof HTMLElement)) return;
+      const rect = tool.getBoundingClientRect();
+      setColorPickerShell({ left: rect.left, top: rect.bottom, width: rect.width });
+    };
+    place();
+    eventTarget.addEventListener("resize", place);
+    eventTarget.addEventListener("scroll", place, true);
+    return () => {
+      eventTarget.removeEventListener("resize", place);
+      eventTarget.removeEventListener("scroll", place, true);
+    };
+  }, [colorPickerActive, eventTarget, position.x, position.y, recordingPanelOpen]);
   const selectMode = useCallback6(() => {
     onCancelTransient();
     clearSelection();
@@ -6203,123 +6278,129 @@ function ToolbarComponent({
                                                     anchorRef: guideMenuRef
                                                   }
                                                 ),
-                                                guideMenuOpen ? /* @__PURE__ */ jsxs30(
-                                                  ToolbarMenu,
-                                                  {
-                                                    side: menuSide,
-                                                    align: menuAlign,
-                                                    tabIndex: 0,
-                                                    onKeyDown: (event) => {
-                                                      const key = event.key.toLowerCase();
-                                                      const itemCount = features.rulers ? 3 : 2;
-                                                      const horizontalIndex = features.rulers ? 1 : 0;
-                                                      const verticalIndex = features.rulers ? 2 : 1;
-                                                      if (event.key === "ArrowDown") {
-                                                        event.preventDefault();
-                                                        setActiveMenuIndex((prev) => (prev + 1) % itemCount);
-                                                      }
-                                                      if (event.key === "ArrowUp") {
-                                                        event.preventDefault();
-                                                        setActiveMenuIndex((prev) => (prev - 1 + itemCount) % itemCount);
-                                                      }
-                                                      if (event.key === "Enter") {
-                                                        event.preventDefault();
-                                                        if (features.rulers && activeMenuIndex === 0) selectRulers();
-                                                        else if (activeMenuIndex === horizontalIndex) selectGuideOrientation("horizontal");
-                                                        else if (activeMenuIndex === verticalIndex) selectGuideOrientation("vertical");
-                                                      }
-                                                      if (features.rulers && key === "r") {
-                                                        event.preventDefault();
-                                                        selectRulers();
-                                                      }
-                                                      if (key === "h") {
-                                                        event.preventDefault();
-                                                        selectGuideOrientation("horizontal");
-                                                      }
-                                                      if (key === "v") {
-                                                        event.preventDefault();
-                                                        selectGuideOrientation("vertical");
-                                                      }
-                                                      if (event.key === "Escape") {
-                                                        event.preventDefault();
-                                                        event.stopPropagation();
-                                                        setOpenMenu(null);
-                                                      }
-                                                    },
-                                                    children: [
-                                                      features.rulers ? /* @__PURE__ */ jsxs30(
-                                                        MenuItem,
-                                                        {
-                                                          className: cn(
-                                                            "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
-                                                            activeMenuIndex === 0 || guideControl === "rulers" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
-                                                          ),
-                                                          onClick: () => selectRulers(),
-                                                          children: [
-                                                            /* @__PURE__ */ jsx42(
-                                                              CheckIcon,
-                                                              {
-                                                                size: 12,
-                                                                className: cn(guideControl === "rulers" ? "msr:opacity-100" : "msr:opacity-0")
-                                                              }
-                                                            ),
-                                                            /* @__PURE__ */ jsx42(MeasureLIcon, { size: 12 }),
-                                                            /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Rulers" }),
-                                                            /* @__PURE__ */ jsx42("span", { children: "R" })
-                                                          ]
+                                                guideMenuOpen ? (() => {
+                                                  const menu = /* @__PURE__ */ jsxs30(
+                                                    ToolbarMenu,
+                                                    {
+                                                      ref: recordingPanelOpen ? guideMenuPortalRef : void 0,
+                                                      floating: recordingPanelOpen,
+                                                      floatingStyle: recordingPanelOpen ? floatingMenuStyle(guideMenuPortalPlacement) : void 0,
+                                                      side: menuSide,
+                                                      align: menuAlign,
+                                                      tabIndex: 0,
+                                                      onKeyDown: (event) => {
+                                                        const key = event.key.toLowerCase();
+                                                        const itemCount = features.rulers ? 3 : 2;
+                                                        const horizontalIndex = features.rulers ? 1 : 0;
+                                                        const verticalIndex = features.rulers ? 2 : 1;
+                                                        if (event.key === "ArrowDown") {
+                                                          event.preventDefault();
+                                                          setActiveMenuIndex((prev) => (prev + 1) % itemCount);
                                                         }
-                                                      ) : null,
-                                                      /* @__PURE__ */ jsxs30(
-                                                        MenuItem,
-                                                        {
-                                                          className: cn(
-                                                            "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
-                                                            activeMenuIndex === (features.rulers ? 1 : 0) || guideControl === "guides" && guideOrientation === "horizontal" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
-                                                          ),
-                                                          onClick: () => selectGuideOrientation("horizontal"),
-                                                          children: [
-                                                            /* @__PURE__ */ jsx42(
-                                                              CheckIcon,
-                                                              {
-                                                                size: 12,
-                                                                className: cn(
-                                                                  guideControl === "guides" && guideOrientation === "horizontal" ? "msr:opacity-100" : "msr:opacity-0"
-                                                                )
-                                                              }
-                                                            ),
-                                                            /* @__PURE__ */ jsx42(MinusIcon, { size: 12 }),
-                                                            /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Horizontal" }),
-                                                            /* @__PURE__ */ jsx42("span", { children: "H" })
-                                                          ]
+                                                        if (event.key === "ArrowUp") {
+                                                          event.preventDefault();
+                                                          setActiveMenuIndex((prev) => (prev - 1 + itemCount) % itemCount);
                                                         }
-                                                      ),
-                                                      /* @__PURE__ */ jsxs30(
-                                                        MenuItem,
-                                                        {
-                                                          className: cn(
-                                                            "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
-                                                            activeMenuIndex === (features.rulers ? 2 : 1) || guideControl === "guides" && guideOrientation === "vertical" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
-                                                          ),
-                                                          onClick: () => selectGuideOrientation("vertical"),
-                                                          children: [
-                                                            /* @__PURE__ */ jsx42(
-                                                              CheckIcon,
-                                                              {
-                                                                size: 12,
-                                                                className: cn(
-                                                                  guideControl === "guides" && guideOrientation === "vertical" ? "msr:opacity-100" : "msr:opacity-0"
-                                                                )
-                                                              }
-                                                            ),
-                                                            /* @__PURE__ */ jsx42(MinusIcon, { size: 12, className: "msr:rotate-90" }),
-                                                            /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Vertical" }),
-                                                            /* @__PURE__ */ jsx42("span", { children: "V" })
-                                                          ]
+                                                        if (event.key === "Enter") {
+                                                          event.preventDefault();
+                                                          if (features.rulers && activeMenuIndex === 0) selectRulers();
+                                                          else if (activeMenuIndex === horizontalIndex) selectGuideOrientation("horizontal");
+                                                          else if (activeMenuIndex === verticalIndex) selectGuideOrientation("vertical");
                                                         }
-                                                      )
-                                                    ]
-                                                  }
-                                                ) : null
+                                                        if (features.rulers && key === "r") {
+                                                          event.preventDefault();
+                                                          selectRulers();
+                                                        }
+                                                        if (key === "h") {
+                                                          event.preventDefault();
+                                                          selectGuideOrientation("horizontal");
+                                                        }
+                                                        if (key === "v") {
+                                                          event.preventDefault();
+                                                          selectGuideOrientation("vertical");
+                                                        }
+                                                        if (event.key === "Escape") {
+                                                          event.preventDefault();
+                                                          event.stopPropagation();
+                                                          setOpenMenu(null);
+                                                        }
+                                                      },
+                                                      children: [
+                                                        features.rulers ? /* @__PURE__ */ jsxs30(
+                                                          MenuItem,
+                                                          {
+                                                            className: cn(
+                                                              "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
+                                                              activeMenuIndex === 0 || guideControl === "rulers" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
+                                                            ),
+                                                            onClick: () => selectRulers(),
+                                                            children: [
+                                                              /* @__PURE__ */ jsx42(
+                                                                CheckIcon,
+                                                                {
+                                                                  size: 12,
+                                                                  className: cn(guideControl === "rulers" ? "msr:opacity-100" : "msr:opacity-0")
+                                                                }
+                                                              ),
+                                                              /* @__PURE__ */ jsx42(MeasureLIcon, { size: 12 }),
+                                                              /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Rulers" }),
+                                                              /* @__PURE__ */ jsx42("span", { children: "R" })
+                                                            ]
+                                                          }
+                                                        ) : null,
+                                                        /* @__PURE__ */ jsxs30(
+                                                          MenuItem,
+                                                          {
+                                                            className: cn(
+                                                              "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
+                                                              activeMenuIndex === (features.rulers ? 1 : 0) || guideControl === "guides" && guideOrientation === "horizontal" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
+                                                            ),
+                                                            onClick: () => selectGuideOrientation("horizontal"),
+                                                            children: [
+                                                              /* @__PURE__ */ jsx42(
+                                                                CheckIcon,
+                                                                {
+                                                                  size: 12,
+                                                                  className: cn(
+                                                                    guideControl === "guides" && guideOrientation === "horizontal" ? "msr:opacity-100" : "msr:opacity-0"
+                                                                  )
+                                                                }
+                                                              ),
+                                                              /* @__PURE__ */ jsx42(MinusIcon, { size: 12 }),
+                                                              /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Horizontal" }),
+                                                              /* @__PURE__ */ jsx42("span", { children: "H" })
+                                                            ]
+                                                          }
+                                                        ),
+                                                        /* @__PURE__ */ jsxs30(
+                                                          MenuItem,
+                                                          {
+                                                            className: cn(
+                                                              "msr:group msr:flex msr:w-full msr:items-center msr:gap-2 msr:rounded-[4px] msr:px-2 msr:py-1 msr:text-left msr:text-[11px] msr:leading-4",
+                                                              activeMenuIndex === (features.rulers ? 2 : 1) || guideControl === "guides" && guideOrientation === "vertical" ? "msr:bg-[#0d99ff] msr:text-white" : "msr:text-ink-700 msr:hover:bg-[#0d99ff] msr:hover:text-white"
+                                                            ),
+                                                            onClick: () => selectGuideOrientation("vertical"),
+                                                            children: [
+                                                              /* @__PURE__ */ jsx42(
+                                                                CheckIcon,
+                                                                {
+                                                                  size: 12,
+                                                                  className: cn(
+                                                                    guideControl === "guides" && guideOrientation === "vertical" ? "msr:opacity-100" : "msr:opacity-0"
+                                                                  )
+                                                                }
+                                                              ),
+                                                              /* @__PURE__ */ jsx42(MinusIcon, { size: 12, className: "msr:rotate-90" }),
+                                                              /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Vertical" }),
+                                                              /* @__PURE__ */ jsx42("span", { children: "V" })
+                                                            ]
+                                                          }
+                                                        )
+                                                      ]
+                                                    }
+                                                  );
+                                                  return recordingPanelOpen ? createPortal4(menu, commentPanelPortalTarget) : menu;
+                                                })() : null
                                               ]
                                             }
                                           ),
@@ -6347,6 +6428,7 @@ function ToolbarComponent({
                                                   ref: layoutGuidesMenuRef,
                                                   className: "mesurer-menu-surface msr:pointer-events-auto msr:fixed msr:z-[100] msr:flex msr:w-60 msr:flex-col msr:overflow-hidden msr:rounded-lg msr:bg-white msr:p-0 msr:shadow-floating",
                                                   style: {
+                                                    zIndex: recordingPanelOpen ? 120 : void 0,
                                                     top: layoutGuidesPlacement.top,
                                                     bottom: layoutGuidesPlacement.bottom,
                                                     right: layoutGuidesPlacement.right,
@@ -6372,7 +6454,7 @@ function ToolbarComponent({
                                               commentPanelPortalTarget
                                             ) : null
                                           ] }),
-                                          /* @__PURE__ */ jsxs30("div", { className: "msr:relative msr:flex", children: [
+                                          /* @__PURE__ */ jsxs30("div", { ref: colorPickerAnchorRef, className: "msr:relative msr:flex", children: [
                                             /* @__PURE__ */ jsx42(
                                               ToolbarButton,
                                               {
@@ -6386,7 +6468,23 @@ function ToolbarComponent({
                                                 children: /* @__PURE__ */ jsx42(DropperIcon, { size: 20, "aria-hidden": "true" })
                                               }
                                             ),
-                                            colorPicker.panel
+                                            recordingPanelOpen && colorPickerActive ? createPortal4(
+                                              /* @__PURE__ */ jsx42(
+                                                "div",
+                                                {
+                                                  className: "msr:pointer-events-none msr:fixed msr:z-[120]",
+                                                  style: {
+                                                    left: colorPickerShell?.left ?? 0,
+                                                    top: colorPickerShell?.top ?? 0,
+                                                    width: colorPickerShell?.width,
+                                                    height: 0,
+                                                    visibility: colorPickerShell ? "visible" : "hidden"
+                                                  },
+                                                  children: /* @__PURE__ */ jsx42("div", { className: "msr:pointer-events-auto", children: colorPicker.panel })
+                                                }
+                                              ),
+                                              commentPanelPortalTarget
+                                            ) : colorPicker.panel
                                           ] })
                                         ] }) })
                                       }
@@ -6461,7 +6559,7 @@ function ToolbarComponent({
                               /* @__PURE__ */ jsxs30("div", { ref: trailingRef, className: "mesurer-toolbar-trailing msr:flex msr:items-stretch", children: [
                                 /* @__PURE__ */ jsx42(ToolbarDivider, {}),
                                 /* @__PURE__ */ jsxs30(ToolbarGroup, { label: "Capture and settings", className: "msr:px-1", children: [
-                                  /* @__PURE__ */ jsxs30("div", { className: "msr:relative msr:flex msr:flex-none", children: [
+                                  /* @__PURE__ */ jsxs30("div", { ref: captureAnchorRef, className: "msr:relative msr:flex msr:flex-none", children: [
                                     features.screenshot ? /* @__PURE__ */ jsxs30(Fragment9, { children: [
                                       /* @__PURE__ */ jsx42(
                                         ToolbarButton,
@@ -6505,50 +6603,56 @@ function ToolbarComponent({
                                         children: /* @__PURE__ */ jsx42(CaretDownIcon, { size: 8, "aria-hidden": "true" })
                                       }
                                     ),
-                                    captureMenuOpen ? /* @__PURE__ */ jsxs30(
-                                      ToolbarMenu,
-                                      {
-                                        side: menuSide,
-                                        align: "right",
-                                        onKeyDown: (event) => {
-                                          if (event.key !== "Escape") return;
-                                          event.preventDefault();
-                                          event.stopPropagation();
-                                          setOpenMenu(null);
-                                        },
-                                        children: [
-                                          /* @__PURE__ */ jsxs30(
-                                            ToolbarMenuItem,
-                                            {
-                                              onClick: () => {
-                                                setOpenMenu(null);
-                                                screenshotMode();
-                                              },
-                                              children: [
-                                                /* @__PURE__ */ jsx42(CameraIcon, { size: 12 }),
-                                                /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Screenshot" }),
-                                                /* @__PURE__ */ jsx42("span", { children: "C" })
-                                              ]
-                                            }
-                                          ),
-                                          /* @__PURE__ */ jsxs30(
-                                            ToolbarMenuItem,
-                                            {
-                                              onClick: () => {
-                                                setOpenMenu(null);
-                                                if (recording) onScreenRecordingStop();
-                                                else recordMode();
-                                              },
-                                              children: [
-                                                /* @__PURE__ */ jsx42(RecordIcon, { size: 12 }),
-                                                /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: recording ? "Stop recording" : "Screen record" }),
-                                                /* @__PURE__ */ jsx42("span", { children: "V" })
-                                              ]
-                                            }
-                                          )
-                                        ]
-                                      }
-                                    ) : null
+                                    captureMenuOpen ? (() => {
+                                      const menu = /* @__PURE__ */ jsxs30(
+                                        ToolbarMenu,
+                                        {
+                                          ref: recordingPanelOpen ? captureMenuPortalRef : void 0,
+                                          floating: recordingPanelOpen,
+                                          floatingStyle: recordingPanelOpen ? floatingMenuStyle(captureMenuPortalPlacement) : void 0,
+                                          side: menuSide,
+                                          align: "right",
+                                          onKeyDown: (event) => {
+                                            if (event.key !== "Escape") return;
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            setOpenMenu(null);
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxs30(
+                                              ToolbarMenuItem,
+                                              {
+                                                onClick: () => {
+                                                  setOpenMenu(null);
+                                                  screenshotMode();
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx42(CameraIcon, { size: 12 }),
+                                                  /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Screenshot" }),
+                                                  /* @__PURE__ */ jsx42("span", { children: "C" })
+                                                ]
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsxs30(
+                                              ToolbarMenuItem,
+                                              {
+                                                onClick: () => {
+                                                  setOpenMenu(null);
+                                                  if (recording) onScreenRecordingStop();
+                                                  else recordMode();
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx42(RecordIcon, { size: 12 }),
+                                                  /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: recording ? "Stop recording" : "Screen record" }),
+                                                  /* @__PURE__ */ jsx42("span", { children: "V" })
+                                                ]
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      );
+                                      return recordingPanelOpen ? createPortal4(menu, commentPanelPortalTarget) : menu;
+                                    })() : null
                                   ] }),
                                   /* @__PURE__ */ jsxs30("div", { ref: commentMenuRef, className: "msr:relative msr:flex msr:flex-none", "data-mesurer-comment-ui": true, children: [
                                     /* @__PURE__ */ jsx42(
@@ -6604,9 +6708,38 @@ function ToolbarComponent({
                                           if (toolMode !== "comments") preserveToolGroupRef.current = true;
                                           onSelectComment(id);
                                         },
-                                        fixed: true
+                                        fixed: true,
+                                        fixedZIndex: recordingPanelOpen ? 120 : 100
                                       }
-                                    ), commentPanelPortalTarget) : /* @__PURE__ */ jsx42(
+                                    ), commentPanelPortalTarget) : recordingPanelOpen ? createPortal4(
+                                      /* @__PURE__ */ jsx42(
+                                        MenuSurface,
+                                        {
+                                          ref: commentDropdownPortalRef,
+                                          className: "msr:pointer-events-auto msr:fixed msr:flex msr:w-44 msr:flex-col msr:gap-px",
+                                          style: floatingMenuStyle(commentDropdownPlacement),
+                                          "data-mesurer-comment-ui": true,
+                                          children: /* @__PURE__ */ jsxs30(Fragment9, { children: [
+                                            /* @__PURE__ */ jsx42(MenuItem, { disabled: commentCount === 0, onClick: openCommentsPanel, children: /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Show all comments" }) }),
+                                            /* @__PURE__ */ jsxs30(
+                                              MenuItem,
+                                              {
+                                                disabled: commentCount === 0,
+                                                onClick: () => {
+                                                  void onCopyComments();
+                                                  setOpenMenu(null);
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx42("span", { className: "msr:flex-1", children: "Copy comments" }),
+                                                  commentsCopied ? /* @__PURE__ */ jsx42(CheckIcon, { size: 12 }) : /* @__PURE__ */ jsx42("span", { children: copyCommentsShortcut })
+                                                ]
+                                              }
+                                            )
+                                          ] })
+                                        }
+                                      ),
+                                      commentPanelPortalTarget
+                                    ) : /* @__PURE__ */ jsx42(
                                       MenuSurface,
                                       {
                                         className: cn(
@@ -6652,29 +6785,31 @@ function ToolbarComponent({
                                         children: /* @__PURE__ */ jsx42(SettingsIcon, { size: 20, "aria-hidden": "true" })
                                       }
                                     ),
-                                    settingsOpen ? /* @__PURE__ */ jsx42(
-                                      "div",
-                                      {
-                                        ref: settingsMenuRef,
-                                        className: cn(
-                                          "mesurer-menu-surface msr:absolute msr:z-[95] msr:flex msr:w-auto msr:max-w-[calc(100vw-16px)] msr:flex-col msr:overflow-hidden msr:rounded-lg msr:bg-white msr:p-0 msr:shadow-floating",
-                                          settingsPlacement.side === "bottom" ? "msr:top-full msr:mt-2" : "msr:bottom-full msr:mb-2"
-                                        ),
-                                        style: {
-                                          right: settingsPlacement.right,
-                                          height: settingsPlacement.height,
-                                          maxHeight: settingsPlacement.height
-                                        },
-                                        "data-mesurer-inspector-ui": "true",
-                                        "data-mesurer-settings-panel": true,
-                                        role: "dialog",
-                                        "aria-label": "Settings",
-                                        onPointerDown: (event) => event.stopPropagation(),
-                                        onPointerMove: (event) => event.stopPropagation(),
-                                        onPointerUp: (event) => event.stopPropagation(),
-                                        onClick: (event) => event.stopPropagation(),
-                                        children: settingsPanel
-                                      }
+                                    settingsOpen ? createPortal4(
+                                      /* @__PURE__ */ jsx42(
+                                        "div",
+                                        {
+                                          ref: settingsMenuRef,
+                                          className: "mesurer-menu-surface msr:pointer-events-auto msr:fixed msr:z-[120] msr:flex msr:w-auto msr:max-w-[calc(100vw-16px)] msr:flex-col msr:overflow-hidden msr:rounded-lg msr:bg-white msr:p-0 msr:shadow-floating",
+                                          style: {
+                                            top: settingsPlacement.top,
+                                            bottom: settingsPlacement.bottom,
+                                            right: settingsPlacement.right,
+                                            height: settingsPlacement.height,
+                                            maxHeight: settingsPlacement.height
+                                          },
+                                          "data-mesurer-inspector-ui": "true",
+                                          "data-mesurer-settings-panel": true,
+                                          role: "dialog",
+                                          "aria-label": "Settings",
+                                          onPointerDown: (event) => event.stopPropagation(),
+                                          onPointerMove: (event) => event.stopPropagation(),
+                                          onPointerUp: (event) => event.stopPropagation(),
+                                          onClick: (event) => event.stopPropagation(),
+                                          children: settingsPanel
+                                        }
+                                      ),
+                                      commentPanelPortalTarget
                                     ) : null
                                   ] }) : null
                                 ] })
@@ -6788,11 +6923,11 @@ var getDirectTextRangeAtPoint = (control, point, ownerDocument) => {
   const container = range.startContainer;
   if (container.nodeType !== Node.TEXT_NODE) return null;
   if (!control.contains(container)) return null;
-  const text = container.nodeValue ?? "";
-  const trimmed = text.trim();
+  const text2 = container.nodeValue ?? "";
+  const trimmed = text2.trim();
   if (!trimmed) return null;
   const textRange = ownerDocument.createRange();
-  const start = text.indexOf(trimmed);
+  const start = text2.indexOf(trimmed);
   if (start < 0) return null;
   textRange.setStart(container, start);
   textRange.setEnd(container, start + trimmed.length);
@@ -7418,24 +7553,24 @@ var lineOrientation = (rect) => {
   if (rect.height < 1 && rect.width >= 1) return "horizontal";
   return null;
 };
-var measureLineToBox = (line, box, orientation) => {
-  const boxRight = box.left + box.width;
-  const boxBottom = box.top + box.height;
+var measureLineToBox = (line, box2, orientation) => {
+  const boxRight = box2.left + box2.width;
+  const boxBottom = box2.top + box2.height;
   let horizontal = null;
   let vertical = null;
   const extraHorizontals = [];
   const extraVerticals = [];
   if (orientation === "vertical") {
     const x = line.left;
-    const y = box.top + box.height / 2;
-    if (x <= box.left) {
-      horizontal = { x1: x, x2: box.left, y, value: box.left - x };
+    const y = box2.top + box2.height / 2;
+    if (x <= box2.left) {
+      horizontal = { x1: x, x2: box2.left, y, value: box2.left - x };
     } else if (x >= boxRight) {
       horizontal = { x1: boxRight, x2: x, y, value: x - boxRight };
     } else {
-      const toLeft = x - box.left;
+      const toLeft = x - box2.left;
       const toRight = boxRight - x;
-      if (toLeft > 0.5) horizontal = { x1: box.left, x2: x, y, value: toLeft };
+      if (toLeft > 0.5) horizontal = { x1: box2.left, x2: x, y, value: toLeft };
       if (toRight > 0.5) {
         const right = { x1: x, x2: boxRight, y, value: toRight };
         if (horizontal) extraHorizontals.push(right);
@@ -7444,15 +7579,15 @@ var measureLineToBox = (line, box, orientation) => {
     }
   } else {
     const y = line.top;
-    const x = box.left + box.width / 2;
-    if (y <= box.top) {
-      vertical = { y1: y, y2: box.top, x, value: box.top - y };
+    const x = box2.left + box2.width / 2;
+    if (y <= box2.top) {
+      vertical = { y1: y, y2: box2.top, x, value: box2.top - y };
     } else if (y >= boxBottom) {
       vertical = { y1: boxBottom, y2: y, x, value: y - boxBottom };
     } else {
-      const toTop = y - box.top;
+      const toTop = y - box2.top;
       const toBottom = boxBottom - y;
-      if (toTop > 0.5) vertical = { y1: box.top, y2: y, x, value: toTop };
+      if (toTop > 0.5) vertical = { y1: box2.top, y2: y, x, value: toTop };
       if (toBottom > 0.5) {
         const bottom = { y1: y, y2: boxBottom, x, value: toBottom };
         if (vertical) extraVerticals.push(bottom);
@@ -7484,9 +7619,9 @@ var getDistanceOverlay = (rectA, rectB, elementRefA, elementRefB, ownerWindow =
   if (Boolean(lineA) !== Boolean(lineB)) {
     const orientation = lineA ?? lineB;
     const line = lineA ? rectA : rectB;
-    const box = lineA ? rectB : rectA;
+    const box2 = lineA ? rectB : rectA;
     if (orientation) {
-      const measured = measureLineToBox(line, box, orientation);
+      const measured = measureLineToBox(line, box2, orientation);
       horizontal = measured.horizontal;
       vertical = measured.vertical;
       extraHorizontals = measured.extraHorizontals.length > 0 ? measured.extraHorizontals : void 0;
@@ -8976,9 +9111,9 @@ var transformedArrowBounds = (arrow) => {
   return rotatedBounds(arrowBounds(arrow), arrow.rotation ?? 0);
 };
 var resizeArrow = (arrow, handle, pointer) => {
-  const box = arrowBounds(arrow);
+  const box2 = arrowBounds(arrow);
   const rotation = arrow.rotation ?? 0;
-  const geometry = resizeGeometry(box, rotation, handle, pointer);
+  const geometry = resizeGeometry(box2, rotation, handle, pointer);
   const points = [arrow.start, arrow.control ?? { x: (arrow.start.x + arrow.end.x) / 2, y: (arrow.start.y + arrow.end.y) / 2 }, arrow.end];
   const nextPoints = points.map((point) => resizePoint(point, geometry));
   return { ...arrow, start: nextPoints[0], control: nextPoints[1], end: nextPoints[2] };
@@ -9772,10 +9907,10 @@ function TextItem({
     }
   }, [editing, item.text]);
   const measureBox = () => {
-    const box = boxRef.current;
+    const box2 = boxRef.current;
     return {
-      width: box?.offsetWidth ?? 32,
-      height: box?.offsetHeight ?? 24
+      width: box2?.offsetWidth ?? 32,
+      height: box2?.offsetHeight ?? 24
     };
   };
   const pointerPage = (event) => ({
@@ -9964,9 +10099,9 @@ var movePenStroke = (stroke, dx, dy) => ({
   points: stroke.points.map((point) => ({ x: point.x + dx, y: point.y + dy }))
 });
 var resizePenStroke = (stroke, handle, pointer) => {
-  const box = penBounds(stroke);
+  const box2 = penBounds(stroke);
   const rotation = stroke.rotation ?? 0;
-  const geometry = resizeGeometry(box, rotation, handle, pointer);
+  const geometry = resizeGeometry(box2, rotation, handle, pointer);
   return {
     ...stroke,
     points: stroke.points.map((point) => {
@@ -9976,8 +10111,8 @@ var resizePenStroke = (stroke, handle, pointer) => {
   };
 };
 var rotatePenStroke = (stroke, pointer, offset) => {
-  const box = penBounds(stroke);
-  const center = boxCenter(box.x, box.y, box.width, box.height);
+  const box2 = penBounds(stroke);
+  const center = boxCenter(box2.x, box2.y, box2.width, box2.height);
   const nextRotation = rotationFromPointer(center, pointer) - offset;
   return {
     ...stroke,
@@ -9985,8 +10120,8 @@ var rotatePenStroke = (stroke, pointer, offset) => {
   };
 };
 var rotatePenStrokeAround = (stroke, center, degrees) => {
-  const box = penBounds(stroke);
-  const strokeCenter = boxCenter(box.x, box.y, box.width, box.height);
+  const box2 = penBounds(stroke);
+  const strokeCenter = boxCenter(box2.x, box2.y, box2.width, box2.height);
   const rotation = stroke.rotation ?? 0;
   const nextCenter = rotatePoint(strokeCenter, center, degrees);
   const nextRotation = rotation + degrees;
@@ -10122,8 +10257,8 @@ var PenLayer = memo8(function PenLayer2({
   const startRotate = (stroke, event) => {
     event.preventDefault();
     event.stopPropagation();
-    const box = penBounds(stroke);
-    const center = boxCenter(box.x, box.y, box.width, box.height);
+    const box2 = penBounds(stroke);
+    const center = boxCenter(box2.x, box2.y, box2.width, box2.height);
     onChangeStart();
     dragRef.current = { id: stroke.id, type: "rotate", start: pointerPage(event), stroke, offset: rotationFromPointer(center, pointerPage(event)) - (stroke.rotation ?? 0) };
     trackDrag(event);
@@ -10148,9 +10283,9 @@ var PenLayer = memo8(function PenLayer2({
       preview.length > 0 ? /* @__PURE__ */ jsx57("path", { d: pathForPoints(translate(preview)), fill: "none", stroke: "#0d99ff", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", opacity: 0.65, "data-mesurer-pen-preview": "true" }) : null
     ] }),
     selectionMode ? selectedStrokes.map((stroke) => {
-      const box = penBounds(stroke);
+      const box2 = penBounds(stroke);
       const showControls = selectionCount === 1;
-      return /* @__PURE__ */ jsx57("div", { className: `msr:absolute ${showControls ? "msr:pointer-events-auto msr:cursor-move" : "msr:pointer-events-none"}`, style: { left: box.x - scrollOffset.x + (selectedIds.includes(stroke.id) ? moveOffset.x : 0), top: box.y - scrollOffset.y + (selectedIds.includes(stroke.id) ? moveOffset.y : 0), width: box.width, height: box.height, transform: `rotate(${stroke.rotation ?? 0}deg)`, transformOrigin: "center center" }, onPointerDown: showControls ? (event) => startMove(stroke, event) : void 0, children: /* @__PURE__ */ jsx57(TextTransformFrame, { frameDataAttribute: "data-mesurer-pen-frame", handleDataAttribute: "data-mesurer-pen-handle", rotation: stroke.rotation ?? 0, showControls, showOutline: true, onResizeStart: (handle, event) => startResize2(stroke, handle, event), onRotateStart: (event) => startRotate(stroke, event) }) }, stroke.id);
+      return /* @__PURE__ */ jsx57("div", { className: `msr:absolute ${showControls ? "msr:pointer-events-auto msr:cursor-move" : "msr:pointer-events-none"}`, style: { left: box2.x - scrollOffset.x + (selectedIds.includes(stroke.id) ? moveOffset.x : 0), top: box2.y - scrollOffset.y + (selectedIds.includes(stroke.id) ? moveOffset.y : 0), width: box2.width, height: box2.height, transform: `rotate(${stroke.rotation ?? 0}deg)`, transformOrigin: "center center" }, onPointerDown: showControls ? (event) => startMove(stroke, event) : void 0, children: /* @__PURE__ */ jsx57(TextTransformFrame, { frameDataAttribute: "data-mesurer-pen-frame", handleDataAttribute: "data-mesurer-pen-handle", rotation: stroke.rotation ?? 0, showControls, showOutline: true, onResizeStart: (handle, event) => startResize2(stroke, handle, event), onRotateStart: (event) => startRotate(stroke, event) }) }, stroke.id);
     }) : null
   ] });
 });
@@ -10493,8 +10628,8 @@ function CommentComposer({
 // comments/export.ts
 var formatTarget = (comment) => {
   const { target } = comment;
-  const text = target.textSnippet ? `${target.textSnippet}` : "";
-  return `[<${target.tagName}>${text}</${target.tagName}> selector: \`${target.selector}\`]`;
+  const text2 = target.textSnippet ? `${target.textSnippet}` : "";
+  return `[<${target.tagName}>${text2}</${target.tagName}> selector: \`${target.selector}\`]`;
 };
 var formatCommentsForAgent = (comments, url = "", viewport) => {
   return [
@@ -11824,11 +11959,11 @@ function CommentsLayer({
               setMessageDeleteConfirmationId(null);
             },
             onCancelDeleteMessage: () => setMessageDeleteConfirmationId(null),
-            onSaveEdit: (messageId, text) => onEditMessage(selected.id, messageId, text),
+            onSaveEdit: (messageId, text2) => onEditMessage(selected.id, messageId, text2),
             replyText,
             onReplyTextChange: setReplyText,
-            onAddMessage: (text) => {
-              onAddMessage(selected.id, text);
+            onAddMessage: (text2) => {
+              onAddMessage(selected.id, text2);
               setReplyText("");
             },
             onToggleResolved,
@@ -11917,7 +12052,7 @@ var MesurerOverlay = memo9(function MesurerOverlay2({
   distances,
   guides,
   arrows,
-  text,
+  text: text2,
   pen,
   comments
 }) {
@@ -11997,7 +12132,7 @@ var MesurerOverlay = memo9(function MesurerOverlay2({
           }
         ),
         toolMode === "selection" && marqueeRect ? /* @__PURE__ */ jsx65(MarqueeRect, { rect: marqueeRect, color: outlineColor }) : null,
-        /* @__PURE__ */ jsx65(TextLayer, { ...text, selectionCount }),
+        /* @__PURE__ */ jsx65(TextLayer, { ...text2, selectionCount }),
         /* @__PURE__ */ jsx65(PenLayer, { ...pen, selectionCount }),
         /* @__PURE__ */ jsx65(
           ArrowsLayer,
@@ -12737,7 +12872,7 @@ var useHotkeys = (options) => {
       }
     };
     const handleKeyboardBridge = (event) => {
-      if (event.source !== target || event.origin !== target.location.origin || !isMesurerKeyboardOwned(target)) return;
+      if (event.source !== target && event.source !== null || event.origin !== target.location.origin && event.origin !== "null") return;
       const data = event.data;
       if (!isMesurerKeyboardBridge(data)) return;
       const signature = keyboardEventSignature(data.eventType, data);
@@ -12791,7 +12926,7 @@ var useOverlayKeyboard = ({
 }) => {
   useLayoutEffect15(() => {
     installKeyboardGate(eventTarget);
-    const claimedRef = { current: false };
+    const claimedRef = { current: overlayActive };
     const owned = overlayActive && (claimedRef.current || isInsideMesurer(getDeepActiveElement(eventTarget)));
     setMesurerKeyboardOwned(eventTarget.document, owned);
     const onFocusIn = () => {
@@ -12802,7 +12937,7 @@ var useOverlayKeyboard = ({
         setMesurerKeyboardOwned(eventTarget.document, true);
         return;
       }
-      if (active instanceof Element && !isInsideMesurer(active)) {
+      if (active instanceof Element && !isInsideMesurer(active) && isEditableElement(active)) {
         claimedRef.current = false;
         setMesurerKeyboardOwned(eventTarget.document, false);
         return;
@@ -12936,7 +13071,7 @@ var useInteractionLifecycle = (options) => {
     options.setRulersVisible(false);
     options.setToolMode("none");
   }, [clearTransientState, options]);
-  const keyboardOwned = options.enabled && !options.minimized && (options.toolMode !== "none" || options.toolbarActive);
+  const keyboardOwned = options.enabled && !options.minimized;
   const overlayActive = options.enabled && (options.toolMode !== "none" || options.toolbarActive);
   useOverlayKeyboard({
     eventTarget: options.ownerWindow,
@@ -13264,7 +13399,7 @@ var normalizeStoredSettings = (value) => {
     ...typeof input.multiMeasureEnabled === "boolean" ? { multiMeasureEnabled: input.multiMeasureEnabled } : {},
     ...input.infoCardMode === "hover" || input.infoCardMode === "click" ? { infoCardMode: input.infoCardMode } : input.copySelectorOnInspect === true ? { infoCardMode: "click" } : {},
     ...typeof input.persistOnReload === "boolean" ? { persistOnReload: input.persistOnReload } : {},
-    ...typeof input.shortcutsEnabled === "boolean" ? { shortcutsEnabled: input.shortcutsEnabled } : {},
+    shortcutsEnabled: typeof input.shortcutsEnabled === "boolean" ? input.shortcutsEnabled : true,
     ...input.theme === "system" || input.theme === "light" || input.theme === "dark" ? { theme: input.theme } : {},
     ...normalizeGuideStyle(input.guideStyle) ? { guideStyle: normalizeGuideStyle(input.guideStyle) } : {},
     ...normalizeRulerSettings(input.rulerSettings) ? { rulerSettings: normalizeRulerSettings(input.rulerSettings) } : {},
@@ -14162,7 +14297,7 @@ var useWorkspaceLifecycle = ({
 // hooks/use-overlay-pointer-handlers.ts
 var useOverlayPointerHandlers = (options) => {
-  const { toolMode, arrows, pen, text, comments, measure } = options;
+  const { toolMode, arrows, pen, text: text2, comments, measure } = options;
   if (toolMode === "arrows") {
     return {
       onPointerDown: arrows.handlePointerDown,
@@ -14183,7 +14318,7 @@ var useOverlayPointerHandlers = (options) => {
   }
   if (toolMode === "text") {
     return {
-      onPointerDown: text.handlePointerDown,
+      onPointerDown: text2.handlePointerDown,
       onPointerMove: measure.handlePointerMove,
       onPointerUp: measure.handlePointerUp,
       onPointerLeave: measure.handlePointerLeave,
@@ -14813,7 +14948,7 @@ var useMesurerHistory = ({
   measurements,
   guides,
   arrows,
-  text,
+  text: text2,
   pen,
   comments,
   layoutGuides,
@@ -14858,7 +14993,7 @@ var useMesurerHistory = ({
     clearSelectionRect
   } = transient;
   const { arrows: arrowEntries, setArrows, selectedArrowIds, setSelectedArrowIds } = arrows;
-  const { textAnnotations, setTextAnnotations } = text;
+  const { textAnnotations, setTextAnnotations } = text2;
   const { penStrokes, setPenStrokes, selectedPenStrokeIds, setSelectedPenStrokeIds } = pen;
   const { comments: commentEntries, setComments } = comments;
   const { layoutGuides: layoutGuideEntries, setLayoutGuides } = layoutGuides;
@@ -15561,8 +15696,8 @@ var useCommentState = (initialComments = [], onChange) => {
     setDraft(nextDraft);
   };
   const cancelDraft = () => setDraft(null);
-  const addMessage = (id, text) => {
-    const value = text.trim();
+  const addMessage = (id, text2) => {
+    const value = text2.trim();
     if (!value) return false;
     const message = {
       id: createCommentId(),
@@ -15577,9 +15712,9 @@ var useCommentState = (initialComments = [], onChange) => {
     );
     return true;
   };
-  const commitDraft = (text) => {
+  const commitDraft = (text2) => {
     if (!draft) return null;
-    const value = text.trim();
+    const value = text2.trim();
     if (!value) return null;
     const now = Date.now();
     const comment = {
@@ -15639,8 +15774,8 @@ var useCommentState = (initialComments = [], onChange) => {
       )
     );
   };
-  const updateMessage = (commentId, messageId, text) => {
-    const value = text.trim();
+  const updateMessage = (commentId, messageId, text2) => {
+    const value = text2.trim();
     if (!value) return false;
     updateComments(
       (previous) => previous.map(
@@ -15752,7 +15887,7 @@ var useMesurerWorkspaceState = ({
     persistedState?.penStrokes ?? initialState?.penStrokes,
     persistedState?.selectedPenStrokeIds ?? initialState?.selectedPenStrokeIds
   );
-  const text = useTextAnnotationState(
+  const text2 = useTextAnnotationState(
     persistedState?.textAnnotations ?? initialState?.textAnnotations,
     persistedState?.selectedTextIds ?? initialState?.selectedTextIds
   );
@@ -15793,7 +15928,7 @@ var useMesurerWorkspaceState = ({
     ...guides,
     ...arrows,
     ...pen,
-    ...text,
+    ...text2,
     ...comments,
     toolbarActive,
     setToolbarActive,
@@ -17873,262 +18008,131 @@ async function cropTrackToElement(track, element) {
   return true;
 }
-// core/screen-recording-webm.ts
-var EBML_ID = 440786851;
-var SEGMENT_ID = 408125543;
-var INFO_ID = 357149030;
-var TIMECODE_SCALE_ID = 2807729;
-var DURATION_ID = 17545;
-var CLUSTER_ID = 524531317;
-var MASTER_IDS = /* @__PURE__ */ new Set([EBML_ID, SEGMENT_ID, INFO_ID]);
-var readElementId = (bytes, offset) => {
-  const first = bytes[offset];
-  if (first === void 0 || first === 0) return null;
-  let length = 1;
-  let mask = 128;
-  while (length <= 4 && (first & mask) === 0) {
-    mask >>= 1;
-    length += 1;
-  }
-  if (offset + length > bytes.length) return null;
-  let id = 0;
-  for (let index = 0; index < length; index += 1) id = id * 256 + bytes[offset + index];
-  return { length, id };
-};
-var readElementSize = (bytes, offset) => {
-  const first = bytes[offset];
-  if (first === void 0 || first === 0) return null;
-  let length = 1;
-  let mask = 128;
-  while (length <= 8 && (first & mask) === 0) {
-    mask >>= 1;
-    length += 1;
+// core/mp4-boxes.ts
+var u16 = (value) => new Uint8Array([value >> 8 & 255, value & 255]);
+var u32 = (value) => new Uint8Array([value >>> 24 & 255, value >>> 16 & 255, value >>> 8 & 255, value & 255]);
+var text = (value) => new TextEncoder().encode(value);
+var join = (...parts) => {
+  const output = new Uint8Array(parts.reduce((sum, part) => sum + part.length, 0));
+  let offset = 0;
+  for (const part of parts) {
+    output.set(part, offset);
+    offset += part.length;
   }
-  if (offset + length > bytes.length) return null;
-  const marker = mask - 1;
-  let unknown = (first & marker) === marker;
-  let value = first & marker;
-  for (let index = 1; index < length; index += 1) {
-    const byte = bytes[offset + index];
-    if (byte !== 255) unknown = false;
-    value = value * 256 + byte;
+  return output;
+};
+var box = (type, ...payload) => join(u32(8 + payload.reduce((sum, part) => sum + part.length, 0)), text(type), ...payload);
+var fullBox = (type, version, flags, ...payload) => box(type, new Uint8Array([version, flags >> 16 & 255, flags >> 8 & 255, flags & 255]), ...payload);
+var zeros = (length) => new Uint8Array(length);
+function muxH264Mp4(width, height, samples, avcConfig, timescale = 9e4) {
+  const durations = samples.map((sample, index) => index + 1 < samples.length ? Math.max(1, Math.round((samples[index + 1].timestamp - sample.timestamp) * timescale / 1e6)) : Math.max(1, Math.round(timescale / 30)));
+  const duration = durations.reduce((sum, value) => sum + value, 0);
+  const mdatPayload = join(...samples.map((sample) => sample.data));
+  const ftyp = box("ftyp", text("isom"), u32(512), text("isomiso2avc1mp41"));
+  const mvhd = fullBox("mvhd", 0, 0, zeros(8), u32(timescale), u32(duration), u32(65536), u16(256), zeros(10), u32(65536), zeros(12), u32(65536), zeros(12), u32(2));
+  const tkhd = fullBox("tkhd", 0, 7, zeros(8), u32(1), zeros(4), u32(duration), zeros(8), u16(0), u16(0), u16(0), u16(0), u32(65536), zeros(12), u32(65536), zeros(12), u32(width << 16), u32(height << 16));
+  const mdhd = fullBox("mdhd", 0, 0, zeros(8), u32(timescale), u32(duration), u16(21956), u16(0));
+  const hdlr = fullBox("hdlr", 0, 0, zeros(4), text("vide"), zeros(12), text("Mesurer Video\0"));
+  const vmhd = fullBox("vmhd", 0, 1, zeros(8));
+  const dref = fullBox("dref", 0, 0, u32(1), fullBox("url ", 0, 1));
+  const avc1 = box("avc1", zeros(6), u16(1), zeros(16), u16(width), u16(height), u32(4718592), u32(4718592), zeros(4), u16(1), zeros(32), u16(24), u16(65535), box("avcC", avcConfig));
+  const stsd = fullBox("stsd", 0, 0, u32(1), avc1);
+  const runs = [];
+  for (const delta of durations) {
+    const last = runs[runs.length - 1];
+    if (last?.delta === delta) last.count += 1;
+    else runs.push({ count: 1, delta });
   }
-  return { length, value, unknown };
-};
-var readUint = (bytes, offset, size) => {
-  let value = 0;
-  for (let index = 0; index < size; index += 1) value = value * 256 + bytes[offset + index];
-  return value;
-};
-function writeWebmDuration(bytes, durationSeconds) {
-  if (!(durationSeconds > 0)) return false;
-  let timecodeScale = 1e6;
-  let durationOffset = -1;
-  let durationSize = 0;
-  const walk = (start, end, inInfo) => {
-    let cursor = start;
-    while (cursor + 2 < end && durationOffset < 0) {
-      const id = readElementId(bytes, cursor);
-      if (!id) return;
-      cursor += id.length;
-      const size = readElementSize(bytes, cursor);
-      if (!size) return;
-      cursor += size.length;
-      const dataStart = cursor;
-      if (id.id === CLUSTER_ID) return;
-      if (id.id === TIMECODE_SCALE_ID && !size.unknown && size.value > 0 && size.value <= 8) {
-        timecodeScale = readUint(bytes, dataStart, size.value);
-      }
-      if (id.id === DURATION_ID && inInfo && !size.unknown && (size.value === 4 || size.value === 8)) {
-        durationOffset = dataStart;
-        durationSize = size.value;
-        return;
-      }
-      const dataEnd = size.unknown ? end : dataStart + size.value;
-      if (size.unknown || MASTER_IDS.has(id.id)) {
-        walk(dataStart, dataEnd, inInfo || id.id === INFO_ID);
-        if (durationOffset >= 0) return;
-      }
-      if (size.unknown) return;
-      cursor = dataEnd;
-    }
-  };
-  walk(0, bytes.length, false);
-  if (durationOffset < 0 || timecodeScale <= 0) return false;
-  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-  const current = durationSize === 8 ? view.getFloat64(durationOffset) : view.getFloat32(durationOffset);
-  const next = durationSeconds * (1e9 / timecodeScale);
-  if (Number.isFinite(current) && current >= next - 1e9 / timecodeScale * 0.05) return false;
-  if (durationSize === 8) view.setFloat64(durationOffset, next);
-  else view.setFloat32(durationOffset, next);
-  return true;
-}
-async function correctWebmDuration(blob, durationSeconds) {
-  if (!(durationSeconds > 0) || !blob.type.includes("webm")) return blob;
-  const bytes = new Uint8Array(await blob.arrayBuffer());
-  if (!writeWebmDuration(bytes, durationSeconds)) return blob;
-  return new Blob([bytes], { type: blob.type || "video/webm" });
+  const stts = fullBox("stts", 0, 0, u32(runs.length), ...runs.map((run) => join(u32(run.count), u32(run.delta))));
+  const stsc = fullBox("stsc", 0, 0, u32(1), u32(1), u32(samples.length), u32(1));
+  const stsz = fullBox("stsz", 0, 0, u32(0), u32(samples.length), ...samples.map((sample) => u32(sample.data.length)));
+  const stss = samples.some((sample) => !sample.key) ? fullBox("stss", 0, 0, u32(samples.filter((sample) => sample.key).length), ...samples.flatMap((sample, index) => sample.key ? [u32(index + 1)] : [])) : null;
+  const stbl = box("stbl", stsd, stts, stsc, stsz, stss ?? new Uint8Array());
+  const minf = box("minf", vmhd, box("dinf", dref), stbl);
+  const trak = box("trak", tkhd, box("mdia", mdhd, hdlr, minf));
+  const moov = box("moov", mvhd, trak);
+  const chunkOffset = ftyp.length + moov.length + 20 + 8;
+  const stco = fullBox("stco", 0, 0, u32(1), u32(chunkOffset));
+  const patchedStbl = box("stbl", stsd, stts, stsc, stsz, stco, stss ?? new Uint8Array());
+  const patchedMoov = box("moov", mvhd, box("trak", tkhd, box("mdia", mdhd, hdlr, box("minf", vmhd, box("dinf", dref), patchedStbl))));
+  return join(ftyp, patchedMoov, box("mdat", mdatPayload));
 }
-// core/screen-recording-export.ts
-function resolveRecordingDuration(mediaDuration, elapsedSeconds) {
-  const media = Number.isFinite(mediaDuration) && mediaDuration > 0 ? mediaDuration : 0;
-  const elapsed = Number.isFinite(elapsedSeconds) && elapsedSeconds > 0 ? elapsedSeconds : 0;
-  if (media <= 0 && elapsed <= 0) return 0.1;
-  if (media <= 0) return Math.max(elapsed, 0.1);
-  if (elapsed <= 0) return media;
-  if (media < elapsed * 0.9) return elapsed;
-  return Math.min(media, elapsed);
-}
-function isFullClipExport(startTime, endTime, duration, tolerance = 0.05) {
-  return startTime <= tolerance && endTime >= duration - tolerance;
-}
-async function readBlobVideoDuration(blob, ownerDocument) {
-  const url = URL.createObjectURL(blob);
-  const video = ownerDocument.createElement("video");
-  video.preload = "metadata";
-  video.muted = true;
-  try {
-    return await new Promise((resolve, reject) => {
-      video.onloadedmetadata = () => {
-        resolve(video.duration);
-      };
-      video.onerror = () => reject(new Error("Could not read recording"));
-      video.src = url;
-    });
-  } finally {
-    URL.revokeObjectURL(url);
-    video.removeAttribute("src");
-  }
-}
-async function seekVideoElement(video, time) {
-  const target = Math.max(0, time);
-  if (target <= 0 && video.readyState >= 1) {
-    video.currentTime = 0;
-    return;
-  }
-  await new Promise((resolve, reject) => {
-    const onSeeked = () => resolve();
-    const onError = () => reject(new Error("Could not seek recording"));
-    video.addEventListener("seeked", onSeeked, { once: true });
-    video.addEventListener("error", onError, { once: true });
-    if (video.readyState < 1) {
-      video.addEventListener(
-        "loadedmetadata",
-        () => {
-          video.currentTime = target;
-        },
-        { once: true }
-      );
-    } else {
-      video.currentTime = target;
+// core/screen-recording-mp4.ts
+var encoderCtor = (ownerWindow) => ownerWindow.VideoEncoder;
+var codecs = ["avc1.42001E", "avc1.42001F", "avc1.4D001F", "avc1.64001F"];
+var even = (value) => Math.max(2, Math.round(value) & ~1);
+async function supportedMp4Config(ownerWindow, width, height) {
+  const Encoder = encoderCtor(ownerWindow);
+  if (!Encoder) return null;
+  const dimensions = { width: even(width), height: even(height) };
+  for (const codec of codecs) {
+    try {
+      const result = await Encoder.isConfigSupported({ codec, ...dimensions, bitrate: 4e6, framerate: 30, avc: { format: "avc" } });
+      if (result?.supported) return result.config;
+    } catch {
     }
-  });
-}
-async function requestDisplayMediaStream(ownerWindow) {
-  const fallback = {
-    audio: false,
-    video: true
-  };
-  const chromium = {
-    audio: false,
-    video: { displaySurface: "browser" },
-    preferCurrentTab: true,
-    selfBrowserSurface: "include"
-  };
-  try {
-    return await ownerWindow.navigator.mediaDevices.getDisplayMedia(chromium);
-  } catch (error) {
-    if (error instanceof DOMException && error.name === "AbortError") throw error;
-    return await ownerWindow.navigator.mediaDevices.getDisplayMedia(fallback);
   }
+  return null;
 }
-async function reencodeVideoClip(ownerDocument, ownerWindow, sourceUrl, startTime, endTime, scale, mimeType) {
+async function supportsMp4Encoding(ownerWindow, width, height) {
+  return Boolean(await supportedMp4Config(ownerWindow, width, height));
+}
+async function encodeMp4Clip(ownerDocument, ownerWindow, sourceUrl, startTime, endTime, scale) {
   const source = ownerDocument.createElement("video");
   source.muted = true;
   source.playsInline = true;
-  source.src = sourceUrl;
   source.preload = "auto";
-  await new Promise((resolve, reject) => {
-    const ready = () => source.videoWidth > 0 && source.videoHeight > 0;
-    const finish = () => {
-      if (!ready()) return;
-      resolve();
-    };
-    source.onloadedmetadata = finish;
-    source.onloadeddata = finish;
-    source.onresize = finish;
-    source.onerror = () => reject(new Error("Could not trim recording"));
-    if (ready()) resolve();
-  });
-  await seekVideoElement(source, startTime);
-  if (source.videoWidth <= 0 || source.videoHeight <= 0) {
-    await new Promise((resolve) => {
-      if (typeof source.requestVideoFrameCallback === "function") {
-        source.requestVideoFrameCallback(() => resolve());
-        return;
-      }
-      ownerWindow.requestAnimationFrame(() => resolve());
+  source.src = sourceUrl;
+  try {
+    await new Promise((resolve, reject) => {
+      const ready = () => source.videoWidth > 0 && source.videoHeight > 0 && source.readyState >= 2;
+      const finish = () => ready() && resolve();
+      source.onloadedmetadata = finish;
+      source.onloadeddata = finish;
+      source.onerror = () => reject(new Error("Could not export MP4"));
+      if (ready()) resolve();
     });
-  }
-  const canvas = ownerDocument.createElement("canvas");
-  canvas.width = Math.max(1, Math.round(source.videoWidth * scale));
-  canvas.height = Math.max(1, Math.round(source.videoHeight * scale));
-  const context = canvas.getContext("2d");
-  if (!context) throw new Error("Could not trim recording");
-  const stream = canvas.captureStream(30);
-  const captureTrack = stream.getVideoTracks()[0];
-  const requestFrame = captureTrack && "requestFrame" in captureTrack ? captureTrack.requestFrame : void 0;
-  const recorder = new MediaRecorder(stream, mimeType ? { mimeType } : void 0);
-  const chunks = [];
-  return await new Promise((resolve, reject) => {
-    let stopped = false;
-    const onTimeUpdate = () => {
-      if (source.currentTime >= endTime) finish();
-    };
-    const finish = () => {
-      if (stopped) return;
-      stopped = true;
-      source.removeEventListener("timeupdate", onTimeUpdate);
-      source.pause();
-      try {
-        recorder.stop();
-      } catch {
-        reject(new Error("Could not trim recording"));
-      }
-    };
-    const drawFrame = () => {
-      if (stopped) return;
+    const canvas = ownerDocument.createElement("canvas");
+    canvas.width = even(source.videoWidth * scale);
+    canvas.height = even(source.videoHeight * scale);
+    const context = canvas.getContext("2d");
+    const Encoder = encoderCtor(ownerWindow);
+    if (!context || !Encoder) throw new Error("MP4 export is unavailable");
+    const samples = [];
+    let avcConfig;
+    let failure;
+    const config = await supportedMp4Config(ownerWindow, canvas.width, canvas.height);
+    if (!config) throw new Error("MP4 export is unavailable");
+    const encoder = new Encoder({ output: (chunk, metadata) => {
+      const data = new Uint8Array(chunk.byteLength);
+      chunk.copyTo(data);
+      samples.push({ data, key: chunk.type === "key", timestamp: chunk.timestamp });
+      const description = metadata?.decoderConfig?.description;
+      if (description) avcConfig = new Uint8Array(description);
+    }, error: (error) => {
+      failure = error;
+    } });
+    encoder.configure(config);
+    const VideoFrameCtor = ownerWindow.VideoFrame;
+    if (!VideoFrameCtor) throw new Error("MP4 export is unavailable");
+    let frameIndex = 0;
+    for (const time of Array.from({ length: Math.max(1, Math.ceil((endTime - startTime) * 30)) }, (_, index) => startTime + index / 30)) {
+      await seekVideoElement(source, Math.min(endTime, time));
       context.drawImage(source, 0, 0, canvas.width, canvas.height);
-      requestFrame?.call(captureTrack);
-      if (source.currentTime >= endTime || source.ended) {
-        finish();
-        return;
-      }
-      if (typeof source.requestVideoFrameCallback === "function") {
-        source.requestVideoFrameCallback(() => drawFrame());
-      } else {
-        ownerWindow.requestAnimationFrame(drawFrame);
-      }
-    };
-    recorder.ondataavailable = (event) => {
-      if (event.data.size > 0) chunks.push(event.data);
-    };
-    recorder.onstop = () => {
-      const recorded = new Blob(chunks, { type: recorder.mimeType || mimeType || "video/webm" });
-      void correctWebmDuration(recorded, Math.max(0.1, endTime - startTime)).then(resolve, reject);
-    };
-    recorder.onerror = () => reject(new Error("Could not trim recording"));
-    source.addEventListener("timeupdate", onTimeUpdate);
-    recorder.start(100);
-    void source.play().then(
-      () => drawFrame(),
-      () => {
-        source.removeEventListener("timeupdate", onTimeUpdate);
-        reject(new Error("Could not trim recording"));
-      }
-    );
-  });
+      const frame = new VideoFrameCtor(canvas, { timestamp: Math.round(frameIndex++ * 1e6 / 30) });
+      encoder.encode(frame, { keyFrame: frameIndex === 1 || frameIndex % 60 === 0 });
+      frame.close();
+    }
+    await encoder.flush();
+    encoder.close();
+    if (failure || !avcConfig || samples.length === 0) throw failure ?? new Error("Could not export MP4");
+    return new Blob([new Uint8Array(muxH264Mp4(canvas.width, canvas.height, samples, avcConfig))], { type: "video/mp4" });
+  } finally {
+    source.pause();
+    source.removeAttribute("src");
+    source.load();
+  }
 }
 // core/screen-recording-display-capture.ts
@@ -18257,8 +18261,8 @@ function paintDisplayRecordingFrame(capture, rect, getViewport) {
   const { source, canvas, context, regionLocked, cropTarget, captureTrack } = capture;
   if (source.videoWidth <= 0 || source.videoHeight <= 0) return;
   if (regionLocked && cropTarget) {
-    const box = cropTarget.getBoundingClientRect();
-    const slice = visibleSelectionSlice(box, getViewport());
+    const box2 = cropTarget.getBoundingClientRect();
+    const slice = visibleSelectionSlice(box2, getViewport());
     if (!slice.visible) {
       context.fillStyle = "#000";
       context.fillRect(0, 0, canvas.width, canvas.height);
@@ -18321,16 +18325,12 @@ function runDisplayRecordingDrawLoop(ownerWindow, capture, rect, getViewport, dr
 }
 // hooks/screen-recording-export.ts
-var mp4MimeType = () => ["video/mp4;codecs=avc1.42E01E", "video/mp4"].find((type) => MediaRecorder.isTypeSupported(type));
 var supportedRecordingFormats = () => {
-  const formats = ["webm"];
-  if (typeof MediaRecorder !== "undefined" && mp4MimeType()) formats.push("mp4");
-  return formats;
+  return ["webm", "gif"];
 };
 var supportedWebmMimeType = () => ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"].find(
   (type) => MediaRecorder.isTypeSupported(type)
 );
-var supportedMp4MimeType = mp4MimeType;
 // hooks/use-screen-recording.ts
 var MAX_RECORDING_MS = 6e4;
@@ -18643,8 +18643,16 @@ var useScreenRecording = ({ ownerDocument, ownerWindow, onPrepare, extensionReco
       const blob2 = await fetch(video.url).then((response) => response.blob());
       return { blob: blob2, filename };
     }
-    const mimeType = format === "mp4" ? supportedMp4MimeType() : supportedWebmMimeType();
-    if (format === "mp4" && !mimeType) throw new Error("MP4 export is unavailable");
+    if (format === "gif") {
+      return {
+        blob: await encodeGifClip(ownerDocument, video.url, startTime, endTime, scale),
+        filename
+      };
+    }
+    if (format === "mp4") {
+      return { blob: await encodeMp4Clip(ownerDocument, ownerWindow, video.url, startTime, endTime, scale), filename };
+    }
+    const mimeType = supportedWebmMimeType();
     const blob = await reencodeVideoClip(
       ownerDocument,
       ownerWindow,
@@ -18702,7 +18710,8 @@ var TIMELINE_BAR_MOTION = "msr:transition-[height] msr:duration-300 msr:ease-[cu
 var SCALE_OPTIONS = [1, 2, 3];
 var FORMAT_LABEL = {
   webm: "WebM",
-  mp4: "MP4"
+  mp4: "MP4",
+  gif: "GIF"
 };
 var scaleLabel = (scale, size) => {
   if (!size) return `${scale}\xD7`;
@@ -18833,24 +18842,118 @@ function TrimHandle({
 }
 function ScreenRecordingEditor(props) {
   if (props.playerUrl) {
-    return /* @__PURE__ */ jsx68(ExtensionRecordingFrame, { ...props });
+    return /* @__PURE__ */ jsx68(ExtensionRecordingFrame, { playerUrl: props.playerUrl, onDiscard: props.onDiscard });
   }
   return /* @__PURE__ */ jsx68(StandardScreenRecordingEditor, { ...props });
 }
-function ExtensionRecordingFrame({ playerUrl, onDiscard }) {
+var RECORDING_FRAME_WIDTH = 22 * 16;
+var RECORDING_FRAME_SHADOW = 28;
+var recordingTheme = (from) => {
+  const theme = (from?.closest("[data-mesurer-root]") ?? document.querySelector("[data-mesurer-root]"))?.getAttribute("data-theme");
+  return theme === "light" || theme === "dark" || theme === "system" ? theme : "system";
+};
+function ExtensionRecordingFrame({
+  playerUrl,
+  onDiscard
+}) {
+  const hostRef = useRef40(null);
   const frameRef = useRef40(null);
+  const [frameSize, setFrameSize] = useState31({ width: RECORDING_FRAME_WIDTH, height: 280, menuExtra: 0 });
+  const [anchorSide, setAnchorSide] = useState31("top");
+  const [src, setSrc] = useState31(null);
+  useLayoutEffect19(() => {
+    const url = new URL(playerUrl);
+    url.searchParams.set("theme", recordingTheme(hostRef.current));
+    setSrc(url.toString());
+  }, [playerUrl]);
+  const postFrameState = useCallback23(() => {
+    const frame = frameRef.current;
+    const panel = frame?.parentElement?.parentElement;
+    const side = panel?.style.bottom ? "bottom" : "top";
+    setAnchorSide(side);
+    frame?.contentWindow?.postMessage({ type: "mesurer:recording-theme", theme: recordingTheme(frame ?? hostRef.current) }, "*");
+    frame?.contentWindow?.postMessage({ type: "mesurer:recording-anchor", side }, "*");
+  }, []);
   useEffect15(() => {
     const onMessage = (event) => {
-      if (event.source === frameRef.current?.contentWindow && event.data?.type === "mesurer:recording-discard") {
-        onDiscard();
+      if (event.source !== frameRef.current?.contentWindow) return;
+      if (event.data?.type === "mesurer:recording-discard") onDiscard();
+      if (event.data?.type === "mesurer:recording-frame-intent" && typeof event.data.expanded === "boolean") {
+        setFrameSize((current) => ({
+          ...current,
+          width: event.data.expanded ? 36 * 16 : RECORDING_FRAME_WIDTH,
+          height: event.data.expanded ? Math.max(current.height, 520) : current.height
+        }));
+      }
+      if (event.data?.type === "mesurer:recording-frame-size" && typeof event.data.width === "number" && typeof event.data.height === "number" && event.data.width >= 32 && event.data.height >= 32) {
+        setFrameSize({
+          width: event.data.width,
+          height: event.data.height,
+          menuExtra: typeof event.data.menuExtra === "number" ? event.data.menuExtra : 0
+        });
       }
     };
     window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
-  }, [onDiscard]);
-  return /* @__PURE__ */ jsx68("iframe", { ref: frameRef, title: "Recording preview", src: playerUrl, className: "msr:block msr:max-w-[calc(100vw-16px)] msr:border-0 msr:bg-transparent", style: { width: "calc(36rem + 24px)", height: "calc(32rem + 24px)", margin: -12 } });
+    const root = (frameRef.current ?? hostRef.current)?.closest("[data-mesurer-root]");
+    const panel = frameRef.current?.parentElement?.parentElement;
+    const observer = new MutationObserver(postFrameState);
+    if (root) observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+    if (panel) observer.observe(panel, { attributes: true, attributeFilter: ["style"] });
+    return () => {
+      window.removeEventListener("message", onMessage);
+      observer.disconnect();
+    };
+  }, [onDiscard, postFrameState, src]);
+  const menuAbove = anchorSide === "bottom";
+  const shadow = RECORDING_FRAME_SHADOW;
+  const frameWidth = frameSize.width + shadow * 2;
+  const frameHeight = frameSize.height + frameSize.menuExtra + shadow * 2;
+  return /* @__PURE__ */ jsx68(
+    "div",
+    {
+      ref: hostRef,
+      className: "msr:relative msr:max-w-[calc(100vw-16px)] msr:bg-transparent",
+      style: {
+        width: frameSize.width,
+        height: frameSize.height
+      },
+      children: src ? /* @__PURE__ */ jsx68(
+        "div",
+        {
+          className: "msr:pointer-events-none msr:absolute",
+          style: {
+            width: frameWidth,
+            height: frameHeight,
+            left: -shadow,
+            top: menuAbove ? -(frameSize.menuExtra + shadow) : -shadow,
+            // The iframe is larger than the card so its shadow can paint.
+            // Clip the edge that faces the toolbar; otherwise that transparent
+            // strip sits on the toolbar and swallows clicks.
+            clipPath: menuAbove ? `inset(0 0 ${shadow}px 0)` : `inset(${shadow}px 0 0 0)`
+          },
+          children: /* @__PURE__ */ jsx68(
+            "iframe",
+            {
+              ref: frameRef,
+              title: "Recording preview",
+              src,
+              onLoad: postFrameState,
+              allowTransparency: true,
+              className: "msr:pointer-events-auto msr:absolute msr:inset-0 msr:size-full msr:border-0 msr:bg-transparent msr:shadow-none",
+              style: {
+                backgroundColor: "transparent",
+                colorScheme: "light",
+                border: 0,
+                boxShadow: "none"
+              }
+            }
+          )
+        }
+      ) : null
+    }
+  );
 }
-function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, ownerDocument }) {
+function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, ownerDocument, fillFrame }) {
   const videoRef = useRef40(null);
   const trackRef = useRef40(null);
   const playheadRef = useRef40(null);
@@ -18869,7 +18972,8 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
   const [playing, setPlaying] = useState31(false);
   const [exporting, setExporting] = useState31(false);
   const [expanded, setExpanded] = useState31(false);
-  const formats = useMemo4(() => supportedRecordingFormats(), []);
+  const [mp4Supported, setMp4Supported] = useState31(false);
+  const formats = useMemo4(() => mp4Supported ? [...supportedRecordingFormats(), "mp4"] : supportedRecordingFormats(), [mp4Supported]);
   const [format, setFormat] = useState31(formats[0] ?? "webm");
   const [scale, setScale] = useState31(1);
   const [frameSize, setFrameSize] = useState31(null);
@@ -18884,6 +18988,22 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
   const [exportMenuBox, setExportMenuBox] = useState31(null);
   startRef.current = start;
   endRef.current = end;
+  useEffect15(() => {
+    let active = true;
+    setMp4Supported(false);
+    if (!frameSize || !ownerDocument.defaultView) return () => {
+      active = false;
+    };
+    void supportsMp4Encoding(ownerDocument.defaultView, frameSize.width, frameSize.height).then((supported) => {
+      if (active) setMp4Supported(supported);
+    });
+    return () => {
+      active = false;
+    };
+  }, [frameSize, ownerDocument]);
+  useEffect15(() => {
+    if (!mp4Supported && format === "mp4") setFormat("webm");
+  }, [format, mp4Supported]);
   useEffect15(() => {
     setStart(0);
     setEnd(duration);
@@ -18946,9 +19066,10 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
       const padding = 8;
       const spaceAbove = rect.top - origin.top - padding;
       const spaceBelow = origin.bottom - rect.bottom - padding;
-      const openAbove = spaceAbove >= height || spaceAbove >= spaceBelow;
+      const anchorSide = ownerDocument.getElementById("root")?.getAttribute("data-anchor");
+      const openAbove = anchorSide === "bottom" ? true : anchorSide === "top" ? false : spaceAbove >= height || spaceAbove >= spaceBelow;
       const preferredTop = openAbove ? rect.top - origin.top - height - gap : rect.bottom - origin.top + gap;
-      setExportMenuBox(clampOverlayPosition({
+      const placed = clampOverlayPosition({
         left: rect.right - origin.left - width,
         top: preferredTop,
         width,
@@ -18956,13 +19077,18 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
         viewportWidth: origin.width,
         viewportHeight: origin.height,
         padding
-      }));
+      });
+      const ready = anchorSide ? openAbove ? spaceAbove >= height : spaceBelow >= height : true;
+      setExportMenuBox({ left: placed.left, top: anchorSide ? preferredTop : placed.top, ready });
     };
     update();
     const view = ownerDocument.defaultView;
     view?.addEventListener("resize", update);
     view?.addEventListener("scroll", update, true);
+    const observer = new ResizeObserver(update);
+    observer.observe(overlayLayer);
     return () => {
+      observer.disconnect();
       view?.removeEventListener("resize", update);
       view?.removeEventListener("scroll", update, true);
     };
@@ -19148,6 +19274,7 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
   }, [exporting, updatePlayheadPosition]);
   const downloadRecording = async () => {
     if (exporting) return;
+    setExportMenuOpen(false);
     setExporting(true);
     setError(null);
     try {
@@ -19162,8 +19289,8 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
       link.click();
       link.remove();
       ownerDocument.defaultView?.setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
-    } catch {
-      setError("Could not export the recording.");
+    } catch (caught) {
+      setError(caught instanceof Error && caught.message ? caught.message : "Could not export the recording.");
     } finally {
       setExporting(false);
     }
@@ -19184,11 +19311,12 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
       ref: cardRef,
       tabIndex: 0,
       "aria-keyshortcuts": "Space",
+      "data-mesurer-recording-card": true,
       "data-expanded": expanded ? "true" : "false",
       className: cn(
         "mesurer-menu-surface msr:relative msr:box-border msr:overflow-visible msr:rounded-wide-card msr:bg-white msr:shadow-floating msr:outline-none",
-        "msr:w-[22rem] msr:max-w-[calc(100vw-24px)] msr:transition-[width] msr:duration-200 msr:ease-[ease] msr:motion-reduce:transition-none",
-        expanded && "msr:w-[36rem]"
+        fillFrame ? "msr:w-full msr:max-w-none" : "msr:w-[22rem] msr:max-w-[calc(100vw-24px)] msr:transition-[width] msr:duration-200 msr:ease-[ease] msr:motion-reduce:transition-none",
+        !fillFrame && expanded && "msr:w-[36rem]"
       ),
       "aria-label": "Screen recording editor",
       "aria-busy": exporting,
@@ -19273,7 +19401,7 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
                   )
                 }
               ),
-              exporting ? /* @__PURE__ */ jsx68("div", { className: "msr:absolute msr:inset-0 msr:z-30 msr:flex msr:items-center msr:justify-center msr:bg-ink-900/45 msr:text-[11px] msr:text-white", children: /* @__PURE__ */ jsx68(StatusEllipsis, { label: "Exporting" }) }) : null,
+              exporting ? /* @__PURE__ */ jsx68("div", { className: "msr:absolute msr:inset-0 msr:z-30 msr:flex msr:items-center msr:justify-center msr:bg-black/80 msr:text-[11px] msr:font-medium msr:text-white msr:drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]", children: /* @__PURE__ */ jsx68(StatusEllipsis, { label: "Generating" }) }) : null,
               /* @__PURE__ */ jsxs52(
                 "div",
                 {
@@ -19414,6 +19542,7 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
                       variant: "ghost",
                       "aria-haspopup": "menu",
                       "aria-expanded": exportMenuOpen,
+                      disabled: exporting,
                       "aria-label": "Export options",
                       className: "msr:px-1 msr:font-mono msr:text-[10px] msr:leading-none",
                       style: { height: 20 },
@@ -19442,7 +19571,7 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
               {
                 ref: exportMenuSurfaceRef,
                 className: "msr:pointer-events-auto msr:absolute",
-                style: exportMenuBox ? { left: exportMenuBox.left, top: exportMenuBox.top } : { left: 0, top: 0, visibility: "hidden" },
+                style: exportMenuBox?.ready ? { left: exportMenuBox.left, top: exportMenuBox.top } : { left: exportMenuBox?.left ?? 0, top: exportMenuBox?.top ?? 0, visibility: "hidden" },
                 children: /* @__PURE__ */ jsxs52(MenuSurface, { className: "msr:w-max msr:min-w-44", children: [
                   /* @__PURE__ */ jsx68("p", { className: "msr:px-2 msr:py-1 msr:text-[10px] msr:font-medium msr:text-ink-500", children: "Format" }),
                   formats.map((item) => {
@@ -19453,7 +19582,10 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
                         variant: "neutral",
                         className: exportMenuRowClass(selected),
                         "aria-checked": selected,
-                        onClick: () => setFormat(item),
+                        onClick: () => {
+                          setFormat(item);
+                          setExportMenuOpen(false);
+                        },
                         children: [
                           /* @__PURE__ */ jsx68(
                             CheckIcon,
@@ -19477,7 +19609,10 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
                         variant: "neutral",
                         className: exportMenuRowClass(selected),
                         "aria-checked": selected,
-                        onClick: () => setScale(item),
+                        onClick: () => {
+                          setScale(item);
+                          setExportMenuOpen(false);
+                        },
                         children: [
                           /* @__PURE__ */ jsx68(
                             CheckIcon,
@@ -19514,7 +19649,13 @@ function StandardScreenRecordingEditor({ url, duration, onDiscard, onExport, own
               tooltipId: "recording-resize",
               tooltip,
               pressed: expanded,
-              onClick: () => setExpanded((current) => !current),
+              onClick: () => {
+                const next = !expanded;
+                if (ownerDocument.defaultView && ownerDocument.defaultView.parent !== ownerDocument.defaultView) {
+                  ownerDocument.defaultView.parent.postMessage({ type: "mesurer:recording-frame-intent", expanded: next }, "*");
+                }
+                setExpanded(next);
+              },
               children: expanded ? /* @__PURE__ */ jsx68(CollapseIcon, {}) : /* @__PURE__ */ jsx68(ExpandIcon, {})
             }
           )
@@ -23563,23 +23704,23 @@ var makeEdge = (document2, side, color) => {
   return edge;
 };
 var makeBox = (document2, fill, outline) => {
-  const box = document2.createElement("div");
-  Object.assign(box.style, {
+  const box2 = document2.createElement("div");
+  Object.assign(box2.style, {
     position: "fixed",
     zIndex: "0",
     pointerEvents: "none",
     backgroundColor: fill,
     boxSizing: "border-box"
   });
-  box.className = "mesurer-ti-box";
-  box.dataset.state = "hidden";
+  box2.className = "mesurer-ti-box";
+  box2.dataset.state = "hidden";
   for (const side of ["top", "right", "bottom", "left"]) {
-    box.appendChild(makeEdge(document2, side, outline));
+    box2.appendChild(makeEdge(document2, side, outline));
   }
-  return box;
+  return box2;
 };
-var positionBox = (box, rect) => {
-  Object.assign(box.style, {
+var positionBox = (box2, rect) => {
+  Object.assign(box2.style, {
     left: `${rect.left}px`,
     top: `${rect.top}px`,
     width: `${rect.width}px`,
@@ -24079,27 +24220,27 @@ var createTextInspector = (options = {}, legacy = false) => {
       if (pinned.length >= maxPinned) removePin(pinned[0], false, true);
     }
     const root = ensureOverlay();
-    const box = makeBox(document2, FILL_PINNED, OUTLINE_PINNED);
+    const box2 = makeBox(document2, FILL_PINNED, OUTLINE_PINNED);
     const card = makeCard(document2, true);
     const info = typography.getFull(sourceEl);
     populateCard(document2, card, info, true);
-    root.append(box, card);
+    root.append(box2, card);
     const pin = {
       sourceEl,
-      box,
+      box: box2,
       card,
       userPlaced: state?.userPlaced ?? false,
       detach: () => {
       }
     };
     const rect = sourceEl.getBoundingClientRect();
-    positionBox(box, rect);
+    positionBox(box2, rect);
     positionCard(window2, card, rect);
     if (state?.userPlaced) {
       card.style.left = `${state.left}px`;
       card.style.top = `${state.top}px`;
     }
-    setState(box, true);
+    setState(box2, true);
     setState(card, true);
     pinned.push(pin);
     card.querySelector(".mesurer-ti-close")?.addEventListener(