@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap";/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties,theme,base,components,utilities;@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-orange-500:oklch(70.5% .213 47.604);--color-amber-400:oklch(82.8% .189 84.429);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-emerald-500:oklch(69.6% .17 162.48);--color-teal-400:oklch(77.7% .152 181.912);--color-cyan-400:oklch(78.9% .154 211.53);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-500:oklch(60.6% .25 292.717);--color-violet-600:oklch(54.1% .281 293.009);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-400:oklch(71.8% .202 349.761);--color-rose-500:oklch(64.5% .246 16.439);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-5xl:3rem;--text-5xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-md:0 3px 3px #0000001f;--drop-shadow-lg:0 4px 4px #00000026;--drop-shadow-2xl:0 25px 25px #00000026;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-2xl:40px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-1\.5{top:calc(var(--spacing)*-1.5)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-1\/4{top:25%}.top-4{top:calc(var(--spacing)*4)}.top-6{top:calc(var(--spacing)*6)}.top-12{top:calc(var(--spacing)*12)}.top-20{top:calc(var(--spacing)*20)}.top-\[-10\%\]{top:-10%}.-right-1\.5{right:calc(var(--spacing)*-1.5)}.-right-4{right:calc(var(--spacing)*-4)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.right-6{right:calc(var(--spacing)*6)}.right-\[-10\%\]{right:-10%}.bottom-1\/4{bottom:25%}.bottom-6{bottom:calc(var(--spacing)*6)}.bottom-\[-10\%\]{bottom:-10%}.-left-8{left:calc(var(--spacing)*-8)}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.left-4{left:calc(var(--spacing)*4)}.left-\[-10\%\]{left:-10%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.z-\[100\]{z-index:100}.z-\[200\]{z-index:200}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-1{margin-inline:calc(var(--spacing)*1)}.mx-auto{margin-inline:auto}.-mt-1{margin-top:calc(var(--spacing)*-1)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-1\.5{margin-top:calc(var(--spacing)*1.5)}.mt-8{margin-top:calc(var(--spacing)*8)}.mb-0\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-4{margin-left:calc(var(--spacing)*4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-\[40\%\]{height:40%}.h-full{height:100%}.max-h-\[200px\]{max-height:200px}.max-h-\[320px\]{max-height:320px}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-8{width:calc(var(--spacing)*8)}.w-16{width:calc(var(--spacing)*16)}.w-56{width:calc(var(--spacing)*56)}.w-\[1px\]{width:1px}.w-\[40\%\]{width:40%}.w-\[360px\]{width:360px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\[75\%\]{max-width:75%}.max-w-\[600px\]{max-width:600px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[20px\]{min-width:20px}.min-w-\[100px\]{min-width:100px}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.touch-none{touch-action:none}.resize{resize:both}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-12{gap:calc(var(--spacing)*12)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tl-md{border-top-left-radius:var(--radius-md)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-blue-400\/20{border-color:#54a2ff33}@supports (color:color-mix(in lab, red, red)){.border-blue-400\/20{border-color:color-mix(in oklab,var(--color-blue-400)20%,transparent)}}.border-blue-500\/50{border-color:#3080ff80}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/50{border-color:color-mix(in oklab,var(--color-blue-500)50%,transparent)}}.border-current{border-color:currentColor}.border-gray-700{border-color:var(--color-gray-700)}.border-green-500\/50{border-color:#00c75880}@supports (color:color-mix(in lab, red, red)){.border-green-500\/50{border-color:color-mix(in oklab,var(--color-green-500)50%,transparent)}}.border-purple-500\/50{border-color:#ac4bff80}@supports (color:color-mix(in lab, red, red)){.border-purple-500\/50{border-color:color-mix(in oklab,var(--color-purple-500)50%,transparent)}}.border-red-500\/20{border-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.border-red-500\/20{border-color:color-mix(in oklab,var(--color-red-500)20%,transparent)}}.border-red-500\/30{border-color:#fb2c364d}@supports (color:color-mix(in lab, red, red)){.border-red-500\/30{border-color:color-mix(in oklab,var(--color-red-500)30%,transparent)}}.border-red-500\/50{border-color:#fb2c3680}@supports (color:color-mix(in lab, red, red)){.border-red-500\/50{border-color:color-mix(in oklab,var(--color-red-500)50%,transparent)}}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.border-white\/\[0\.04\]{border-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.04\]{border-color:color-mix(in oklab,var(--color-white)4%,transparent)}}.border-white\/\[0\.06\]{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.06\]{border-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.border-white\/\[0\.08\]{border-color:#ffffff14}@supports (color:color-mix(in lab, red, red)){.border-white\/\[0\.08\]{border-color:color-mix(in oklab,var(--color-white)8%,transparent)}}.border-yellow-500\/50{border-color:#edb20080}@supports (color:color-mix(in lab, red, red)){.border-yellow-500\/50{border-color:color-mix(in oklab,var(--color-yellow-500)50%,transparent)}}.bg-\[\#0a0f1a\]{background-color:#0a0f1a}.bg-\[\#0a0f1a\]\/95{background-color:oklab(16.9267% -.00207002 -.024432/.95)}.bg-\[\#080d17\]\/80{background-color:oklab(15.927% -.00273559 -.0227925/.8)}.bg-\[\#141a2a\]{background-color:#141a2a}.bg-\[\#030712\]{background-color:#030712}.bg-black\/0{background-color:#0000}@supports (color:color-mix(in lab, red, red)){.bg-black\/0{background-color:color-mix(in oklab,var(--color-black)0%,transparent)}}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black)60%,transparent)}}.bg-black\/90{background-color:#000000e6}@supports (color:color-mix(in lab, red, red)){.bg-black\/90{background-color:color-mix(in oklab,var(--color-black)90%,transparent)}}.bg-blue-400{background-color:var(--color-blue-400)}.bg-blue-400\/20{background-color:#54a2ff33}@supports (color:color-mix(in lab, red, red)){.bg-blue-400\/20{background-color:color-mix(in oklab,var(--color-blue-400)20%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab,var(--color-blue-500)10%,transparent)}}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/20{background-color:color-mix(in oklab,var(--color-blue-500)20%,transparent)}}.bg-blue-500\/30{background-color:#3080ff4d}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/30{background-color:color-mix(in oklab,var(--color-blue-500)30%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-600\/10{background-color:#155dfc1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-600\/10{background-color:color-mix(in oklab,var(--color-blue-600)10%,transparent)}}.bg-blue-600\/20{background-color:#155dfc33}@supports (color:color-mix(in lab, red, red)){.bg-blue-600\/20{background-color:color-mix(in oklab,var(--color-blue-600)20%,transparent)}}.bg-blue-800\/30{background-color:#193cb84d}@supports (color:color-mix(in lab, red, red)){.bg-blue-800\/30{background-color:color-mix(in oklab,var(--color-blue-800)30%,transparent)}}.bg-current{background-color:currentColor}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-gray-900\/80{background-color:#101828cc}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/80{background-color:color-mix(in oklab,var(--color-gray-900)80%,transparent)}}.bg-gray-900\/90{background-color:#101828e6}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/90{background-color:color-mix(in oklab,var(--color-gray-900)90%,transparent)}}.bg-gray-900\/95{background-color:#101828f2}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/95{background-color:color-mix(in oklab,var(--color-gray-900)95%,transparent)}}.bg-green-500{background-color:var(--color-green-500)}.bg-green-500\/10{background-color:#00c7581a}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/10{background-color:color-mix(in oklab,var(--color-green-500)10%,transparent)}}.bg-green-500\/20{background-color:#00c75833}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/20{background-color:color-mix(in oklab,var(--color-green-500)20%,transparent)}}.bg-purple-500\/20{background-color:#ac4bff33}@supports (color:color-mix(in lab, red, red)){.bg-purple-500\/20{background-color:color-mix(in oklab,var(--color-purple-500)20%,transparent)}}.bg-purple-600\/10{background-color:#9810fa1a}@supports (color:color-mix(in lab, red, red)){.bg-purple-600\/10{background-color:color-mix(in oklab,var(--color-purple-600)10%,transparent)}}.bg-purple-600\/20{background-color:#9810fa33}@supports (color:color-mix(in lab, red, red)){.bg-purple-600\/20{background-color:color-mix(in oklab,var(--color-purple-600)20%,transparent)}}.bg-red-400{background-color:var(--color-red-400)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab,var(--color-red-500)10%,transparent)}}.bg-red-500\/20{background-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/20{background-color:color-mix(in oklab,var(--color-red-500)20%,transparent)}}.bg-red-600{background-color:var(--color-red-600)}.bg-white{background-color:var(--color-white)}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.bg-white\/\[0\.03\]{background-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.03\]{background-color:color-mix(in oklab,var(--color-white)3%,transparent)}}.bg-white\/\[0\.04\]{background-color:#ffffff0a}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.04\]{background-color:color-mix(in oklab,var(--color-white)4%,transparent)}}.bg-yellow-500\/20{background-color:#edb20033}@supports (color:color-mix(in lab, red, red)){.bg-yellow-500\/20{background-color:color-mix(in oklab,var(--color-yellow-500)20%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-500\/10{--tw-gradient-from:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.from-blue-500\/10{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500)10%,transparent)}}.from-blue-500\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600\/10{--tw-gradient-from:#155dfc1a}@supports (color:color-mix(in lab, red, red)){.from-blue-600\/10{--tw-gradient-from:color-mix(in oklab,var(--color-blue-600)10%,transparent)}}.from-blue-600\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-emerald-500{--tw-gradient-from:var(--color-emerald-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-orange-500{--tw-gradient-from:var(--color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-purple-500{--tw-gradient-from:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-rose-500{--tw-gradient-from:var(--color-rose-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-violet-600{--tw-gradient-from:var(--color-violet-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-purple-600\/5{--tw-gradient-via:#9810fa0d}@supports (color:color-mix(in lab, red, red)){.via-purple-600\/5{--tw-gradient-via:color-mix(in oklab,var(--color-purple-600)5%,transparent)}}.via-purple-600\/5{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-amber-400{--tw-gradient-to:var(--color-amber-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-700{--tw-gradient-to:var(--color-blue-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-cyan-400{--tw-gradient-to:var(--color-cyan-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-indigo-600{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-400{--tw-gradient-to:var(--color-pink-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-500\/10{--tw-gradient-to:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.to-purple-500\/10{--tw-gradient-to:color-mix(in oklab,var(--color-purple-500)10%,transparent)}}.to-purple-500\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-red-400{--tw-gradient-to:var(--color-red-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-teal-400{--tw-gradient-to:var(--color-teal-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-violet-400{--tw-gradient-to:var(--color-violet-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.fill-blue-500{fill:var(--color-blue-500)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-3\.5{padding-inline:calc(var(--spacing)*3.5)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-8{padding-top:calc(var(--spacing)*8)}.pt-16{padding-top:calc(var(--spacing)*16)}.pt-32{padding-top:calc(var(--spacing)*32)}.pr-1{padding-right:calc(var(--spacing)*1)}.pr-4{padding-right:calc(var(--spacing)*4)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-10{padding-left:calc(var(--spacing)*10)}.pl-11{padding-left:calc(var(--spacing)*11)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[13px\]{font-size:13px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-blue-300{color:var(--color-blue-300)}.text-blue-300\/50{color:#90c5ff80}@supports (color:color-mix(in lab, red, red)){.text-blue-300\/50{color:color-mix(in oklab,var(--color-blue-300)50%,transparent)}}.text-blue-300\/60{color:#90c5ff99}@supports (color:color-mix(in lab, red, red)){.text-blue-300\/60{color:color-mix(in oklab,var(--color-blue-300)60%,transparent)}}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-green-400{color:var(--color-green-400)}.text-green-500{color:var(--color-green-500)}.text-purple-400{color:var(--color-purple-400)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-yellow-500{color:var(--color-yellow-500)}.uppercase{text-transform:uppercase}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow-2xl{--tw-shadow:0 25px 50px -12px 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)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--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)}.ring-2{--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)}.shadow-blue-500\/20{--tw-shadow-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.shadow-blue-500\/20{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-blue-500)20%,transparent)var(--tw-shadow-alpha),transparent)}}.shadow-blue-500\/30{--tw-shadow-color:#3080ff4d}@supports (color:color-mix(in lab, red, red)){.shadow-blue-500\/30{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-blue-500)30%,transparent)var(--tw-shadow-alpha),transparent)}}.shadow-indigo-500\/30{--tw-shadow-color:#625fff4d}@supports (color:color-mix(in lab, red, red)){.shadow-indigo-500\/30{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)30%,transparent)var(--tw-shadow-alpha),transparent)}}.shadow-red-500\/30{--tw-shadow-color:#fb2c364d}@supports (color:color-mix(in lab, red, red)){.shadow-red-500\/30{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-red-500)30%,transparent)var(--tw-shadow-alpha),transparent)}}.ring-white\/5{--tw-ring-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.ring-white\/5{--tw-ring-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.blur{--tw-blur:blur(8px);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,)}.blur-2xl{--tw-blur:blur(var(--blur-2xl));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,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));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,)}.blur-\[120px\]{--tw-blur:blur(120px);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,)}.blur-lg{--tw-blur:blur(var(--blur-lg));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,)}.blur-xl{--tw-blur:blur(var(--blur-xl));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,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));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,)}.drop-shadow-lg{--tw-drop-shadow-size:drop-shadow(0 4px 4px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-lg));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,)}.drop-shadow-md{--tw-drop-shadow-size:drop-shadow(0 3px 3px var(--tw-drop-shadow-color,#0000001f));--tw-drop-shadow:drop-shadow(var(--drop-shadow-md));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,)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(var(--blur-2xl));backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.group-hover\:bg-black\/30:is(:where(.group):hover *){background-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-black\/30:is(:where(.group):hover *){background-color:color-mix(in oklab,var(--color-black)30%,transparent)}}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.selection\:bg-purple-500\/30 ::-moz-selection{background-color:#ac4bff4d}.selection\:bg-purple-500\/30 ::selection{background-color:#ac4bff4d}@supports (color:color-mix(in lab, red, red)){.selection\:bg-purple-500\/30 ::-moz-selection{background-color:color-mix(in oklab,var(--color-purple-500)30%,transparent)}.selection\:bg-purple-500\/30 ::selection{background-color:color-mix(in oklab,var(--color-purple-500)30%,transparent)}}.selection\:bg-purple-500\/30::-moz-selection{background-color:#ac4bff4d}.selection\:bg-purple-500\/30::selection{background-color:#ac4bff4d}@supports (color:color-mix(in lab, red, red)){.selection\:bg-purple-500\/30::-moz-selection{background-color:color-mix(in oklab,var(--color-purple-500)30%,transparent)}.selection\:bg-purple-500\/30::selection{background-color:color-mix(in oklab,var(--color-purple-500)30%,transparent)}}.placeholder\:text-gray-600::-moz-placeholder{color:var(--color-gray-600)}.placeholder\:text-gray-600::placeholder{color:var(--color-gray-600)}@media (hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:rotate-90:hover{rotate:90deg}.hover\:bg-blue-400\/20:hover{background-color:#54a2ff33}@supports (color:color-mix(in lab, red, red)){.hover\:bg-blue-400\/20:hover{background-color:color-mix(in oklab,var(--color-blue-400)20%,transparent)}}.hover\:bg-blue-500:hover{background-color:var(--color-blue-500)}.hover\:bg-blue-500\/10:hover{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-blue-500\/10:hover{background-color:color-mix(in oklab,var(--color-blue-500)10%,transparent)}}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-purple-500\/10:hover{background-color:#ac4bff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-purple-500\/10:hover{background-color:color-mix(in oklab,var(--color-purple-500)10%,transparent)}}.hover\:bg-red-500\/10:hover{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-red-500\/10:hover{background-color:color-mix(in oklab,var(--color-red-500)10%,transparent)}}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.hover\:from-blue-500:hover{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:from-violet-500:hover{--tw-gradient-from:var(--color-violet-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-blue-600:hover{--tw-gradient-to:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-indigo-500:hover{--tw-gradient-to:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:text-blue-400:hover{color:var(--color-blue-400)}.hover\:text-purple-400:hover{color:var(--color-purple-400)}.hover\:text-red-400:hover{color:var(--color-red-400)}.hover\:text-white:hover{color:var(--color-white)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-indigo-500\/50:hover{--tw-shadow-color:#625fff80}@supports (color:color-mix(in lab, red, red)){.hover\:shadow-indigo-500\/50:hover{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-indigo-500)50%,transparent)var(--tw-shadow-alpha),transparent)}}}.focus\:border-blue-500\/40:focus{border-color:#3080ff66}@supports (color:color-mix(in lab, red, red)){.focus\:border-blue-500\/40:focus{border-color:color-mix(in oklab,var(--color-blue-500)40%,transparent)}}.focus\:border-purple-500\/50:focus{border-color:#ac4bff80}@supports (color:color-mix(in lab, red, red)){.focus\:border-purple-500\/50:focus{border-color:color-mix(in oklab,var(--color-purple-500)50%,transparent)}}.focus\:ring-1:focus{--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)}.focus\:ring-2:focus{--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)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-blue-500\/20:focus{--tw-ring-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.focus\:ring-blue-500\/20:focus{--tw-ring-color:color-mix(in oklab,var(--color-blue-500)20%,transparent)}}.focus\:ring-purple-500\/50:focus{--tw-ring-color:#ac4bff80}@supports (color:color-mix(in lab, red, red)){.focus\:ring-purple-500\/50:focus{--tw-ring-color:color-mix(in oklab,var(--color-purple-500)50%,transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:shadow-none:disabled{--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)}@media (min-width:40rem){.sm\:block{display:block}.sm\:flex{display:flex}.sm\:inline{display:inline}.sm\:w-64{width:calc(var(--spacing)*64)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.md\:flex{display:flex}}@media (min-width:64rem){.lg\:col-span-3{grid-column:span 3/span 3}.lg\:mx-0{margin-inline:calc(var(--spacing)*0)}.lg\:block{display:block}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:justify-start{justify-content:flex-start}.lg\:text-left{text-align:left}.lg\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}.glass-panel{border-style:var(--tw-border-style);border-width:1px;border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.glass-panel{border-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.glass-panel{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.glass-panel{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.glass-panel{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-lg));backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.text-gradient{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:var(--color-blue-400);--tw-gradient-to:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));color:#0000;-webkit-background-clip:text;background-clip:text}.animate-float{animation:6s ease-in-out infinite float}}:root{color:#fff;background-color:#030712;font-family:Inter,sans-serif}h1,h2,h3,h4,h5,h6{font-family:Outfit,sans-serif}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#334155;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#475569}.tldraw-wrapper{isolation:isolate}.tldraw-wrapper *{box-sizing:border-box}@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-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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-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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}[data-lk-theme=default]{color-scheme:dark;--lk-bg: #111;--lk-bg2: rgb(29.75, 29.75, 29.75);--lk-bg3: rgb(42.5, 42.5, 42.5);--lk-bg4: rgb(55.25, 55.25, 55.25);--lk-bg5: #444444;--lk-fg: #fff;--lk-fg2: rgb(244.8, 244.8, 244.8);--lk-fg3: rgb(234.6, 234.6, 234.6);--lk-fg4: rgb(224.4, 224.4, 224.4);--lk-fg5: rgb(214.2, 214.2, 214.2);--lk-border-color: rgba(255, 255, 255, 0.1);--lk-accent-fg: #fff;--lk-accent-bg: #1f8cf9;--lk-accent2: rgb(50.867826087, 150.2, 249.532173913);--lk-accent3: rgb(70.7356521739, 160.4, 250.0643478261);--lk-accent4: rgb(90.6034782609, 170.6, 250.5965217391);--lk-danger-fg: #fff;--lk-danger: #f91f31;--lk-danger2: rgb(249.532173913, 50.867826087, 67.2713043478);--lk-danger3: rgb(250.0643478261, 70.7356521739, 85.5426086957);--lk-danger4: rgb(250.5965217391, 90.6034782609, 103.8139130435);--lk-success-fg: #fff;--lk-success: #1ff968;--lk-success2: rgb(50.867826087, 249.532173913, 117.3930434783);--lk-success3: rgb(70.7356521739, 250.0643478261, 130.7860869565);--lk-success4: rgb(90.6034782609, 250.5965217391, 144.1791304348);--lk-control-fg: var(--lk-fg);--lk-control-bg: var(--lk-bg2);--lk-control-hover-bg: var(--lk-bg3);--lk-control-active-bg: var(--lk-bg4);--lk-control-active-hover-bg: var(--lk-bg5);--lk-connection-excellent: #06db4d;--lk-connection-good: #f9b11f;--lk-connection-poor: #f91f31;--lk-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--lk-font-size: 16px;--lk-line-height: 1.5;--lk-border-radius: 0.5rem;--lk-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);--lk-drop-shadow: rgba(255, 255, 255, 0.2) 0px 0px 24px;--lk-grid-gap: 0.5rem;--lk-control-bar-height: 69px;--lk-chat-header-height: 69px}.lk-button,.lk-start-audio-button,.lk-chat-toggle,.lk-disconnect-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;color:var(--lk-control-fg);background-image:none;background-color:var(--lk-control-bg);border:0;border-radius:var(--lk-border-radius);cursor:pointer;white-space:nowrap;font-size:inherit;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lk-button:not(:disabled):hover,.lk-start-audio-button:not(:disabled):hover,.lk-chat-toggle:not(:disabled):hover,.lk-disconnect-button:not(:disabled):hover{background-color:var(--lk-control-hover-bg)}.lk-button>svg,.lk-start-audio-button>svg,.lk-chat-toggle>svg,.lk-disconnect-button>svg{overflow:visible}.lk-button[aria-pressed=true],[aria-pressed=true].lk-start-audio-button,[aria-pressed=true].lk-chat-toggle,[aria-pressed=true].lk-disconnect-button{background-color:var(--lk-control-active-bg)}.lk-button[aria-pressed=true]:hover,[aria-pressed=true].lk-start-audio-button:hover,[aria-pressed=true].lk-chat-toggle:hover,[aria-pressed=true].lk-disconnect-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true],[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button{background-color:var(--lk-accent-bg)}.lk-button[data-lk-source=screen_share][data-lk-enabled=true]:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-start-audio-button:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-chat-toggle:hover,[data-lk-source=screen_share][data-lk-enabled=true].lk-disconnect-button:hover{background-color:var(--lk-accent2)}.lk-button:disabled,.lk-start-audio-button:disabled,.lk-chat-toggle:disabled,.lk-disconnect-button:disabled{opacity:.5}.lk-button-group{display:inline-flex;align-items:stretch;height:100%}.lk-button-group>.lk-button:first-child,.lk-button-group>.lk-start-audio-button:first-child,.lk-button-group>.lk-chat-toggle:first-child,.lk-button-group>.lk-disconnect-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-button-group-menu{position:relative;flex-shrink:0}.lk-button-group-menu>.lk-button,.lk-button-group-menu>.lk-start-audio-button,.lk-button-group-menu>.lk-chat-toggle,.lk-button-group-menu>.lk-disconnect-button{height:100%;border-top-left-radius:0;border-bottom-left-radius:0}.lk-button-group-menu>.lk-button::after,.lk-button-group-menu>.lk-start-audio-button::after,.lk-button-group-menu>.lk-chat-toggle::after,.lk-button-group-menu>.lk-disconnect-button::after{margin-left:0}.lk-button-menu::after{display:inline-block;content:"";width:.5em;height:.5em;margin-top:-0.25rem;margin-left:.5rem;border-left:.125em solid;border-bottom:.125em solid;transform:rotate(-45deg);transform-origin:center center}.lk-disconnect-button{font-weight:600;color:var(--lk-danger);border:1px solid var(--lk-danger)}.lk-disconnect-button:not(:disabled):hover{--lk-control-hover-bg: var(--lk-danger2);color:var(--lk-danger-fg)}.lk-disconnect-button:not(:disabled):active{--lk-control-hover-bg: var(--lk-danger3);color:var(--lk-danger-fg)}.lk-chat-toggle{position:relative}.lk-chat-toggle[data-lk-unread-msgs]:not([data-lk-unread-msgs="0"]):after{content:attr(data-lk-unread-msgs);position:absolute;top:0;left:0;padding:.25rem;margin-left:.25rem;margin-top:.25rem;border-radius:50%;font-size:.5rem;line-height:.75;background:var(--lk-accent-bg)}.lk-media-device-select:not(:last-child){padding-bottom:.5rem;margin-bottom:.75rem;border-bottom:1px solid var(--lk-border-color)}.lk-media-device-select li:not(:last-child){margin-bottom:.25rem}.lk-media-device-select li>.lk-button{width:100%;justify-content:start;padding-block:.5rem}.lk-media-device-select li:not([data-lk-active=true])>.lk-button:not(:disabled):hover{background-color:var(--lk-bg3)}.lk-media-device-select [data-lk-active=false]>.lk-button:hover{cursor:pointer;background-color:rgba(0,0,0,.05)}.lk-media-device-select [data-lk-active=true]>.lk-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}.lk-device-menu{width:-moz-max-content;width:max-content;position:absolute;top:0;left:0;z-index:5;min-width:10rem;padding:.5rem;margin-bottom:.25rem;white-space:nowrap;background-color:var(--lk-bg2);border:1px solid var(--lk-border-color);border-radius:.75rem;box-shadow:var(--lk-box-shadow)}.lk-device-menu-heading{padding:.25rem .5rem;font-weight:bold;opacity:.65}.lk-start-audio-button{color:var(--lk-accent-fg);background-color:var(--lk-accent-bg)}@media screen and (max-width: 600px){.lk-start-audio-button{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}}.lk-pagination-control{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;background-color:var(--lk-control-bg);border-radius:var(--lk-border-radius);transition:opacity ease-in-out .15s;opacity:0}.lk-pagination-control:hover{opacity:1}.lk-pagination-control>.lk-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.lk-pagination-control>.lk-button:first-child>svg{transform:rotate(180deg)}.lk-pagination-control>.lk-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.lk-pagination-count{padding:.5rem .875rem;border-inline:1px solid var(--lk-bg)}[data-lk-user-interaction=true].lk-pagination-control{opacity:1}.lk-pagination-indicator{position:absolute;height:var(--lk-grid-gap);background-color:var(--lk-bg2);width:-moz-fit-content;width:fit-content;padding:.2rem .5rem;bottom:calc(var(--lk-grid-gap)/2);left:50%;transform:translateX(-50%);border-radius:2rem;opacity:1;display:flex;gap:.2rem;align-items:center}.lk-pagination-indicator span{display:inline-block;width:.4rem;height:.4rem;border-radius:9999999px;background-color:var(--lk-fg);opacity:.35;transition:opacity linear .2s}.lk-pagination-indicator span[data-lk-active]{opacity:.9}.lk-grid-layout{--lk-col-count: 1;--lk-row-count: 1;display:grid;grid-template-columns:repeat(var(--lk-col-count), minmax(0, 1fr));grid-auto-rows:minmax(0, 1fr);grid-gap:var(--lk-grid-gap);width:100%;height:100%;max-width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-grid-layout[data-lk-pagination=true]{padding-bottom:calc(var(--lk-grid-gap)*2)}.lk-focus-layout{display:grid;grid-template-columns:1fr 5fr;gap:var(--lk-grid-gap);width:100%;max-height:100%;padding:var(--lk-grid-gap)}.lk-focused-participant{position:relative}.lk-focused-participant .lk-pip-track{position:absolute;top:10px;right:10px;width:20%;height:auto}@media(max-width: 600px){.lk-focus-layout{grid-template-columns:1fr;grid-template-rows:5fr 1fr}.lk-carousel{order:1}}.lk-carousel{max-height:100%;display:flex;gap:var(--lk-grid-gap)}.lk-carousel>*{flex-shrink:0;aspect-ratio:16/10;scroll-snap-align:start}.lk-carousel[data-lk-orientation=vertical]{flex-direction:column;scroll-snap-type:y mandatory;overflow-y:auto;overflow-x:hidden}.lk-carousel[data-lk-orientation=vertical]>*{--lk-height-minus-gaps: calc(100% - calc(var(--lk-grid-gap) * calc(var(--lk-max-visible-tiles) - 1)));height:calc(var(--lk-height-minus-gaps)/var(--lk-max-visible-tiles))}.lk-carousel[data-lk-orientation=horizontal]{scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto}.lk-carousel[data-lk-orientation=horizontal]>*{--lk-width-minus-gaps: calc(100% - var(--lk-grid-gap) * (var(--lk-max-visible-tiles) - 1));width:calc(var(--lk-width-minus-gaps)/var(--lk-max-visible-tiles))}.lk-connection-quality{width:1.5rem;height:1.5rem}.lk-track-muted-indicator-camera,.lk-track-muted-indicator-microphone{position:relative;width:var(--lk-indicator-size, 1rem);height:var(--lk-indicator-size, 1rem);margin-inline-end:.25rem;transition:opacity .25s ease-in-out}.lk-track-muted-indicator-camera[data-lk-muted=true]{opacity:.5}.lk-track-muted-indicator-microphone{--lk-bg: var(--lk-icon-mic)}.lk-track-muted-indicator-microphone[data-lk-muted=true]{opacity:.5}.lk-participant-name{font-size:.875rem}.lk-participant-media-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;background-color:#000}.lk-participant-media-video[data-lk-orientation=landscape]{-o-object-fit:cover;object-fit:cover}.lk-participant-media-video[data-lk-orientation=portrait],.lk-participant-media-video[data-lk-source=screen_share]{-o-object-fit:contain;object-fit:contain;background-color:var(--lk-bg2)}.lk-participant-media-audio{width:auto}[data-lk-facing-mode=user] .lk-participant-media-video[data-lk-local-participant=true][data-lk-source=camera]{transform:rotateY(180deg)}.lk-audio-visualizer{width:100%;height:100%;min-height:160px;background:var(--lk-bg-control);aspect-ratio:16/9;border-radius:.5rem;display:flex;justify-content:space-around;align-items:center}.lk-audio-visualizer>rect{fill:var(--lk-accent-bg);transition:transform 100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-visualizer>path{stroke:var(--lk-accent-bg);transition:100ms cubic-bezier(0.19, 0.02, 0.09, 1)}.lk-audio-bar-visualizer{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--lk-bg);gap:var(--lk-va-bar-gap, 24px)}.lk-audio-bar-visualizer>.lk-audio-bar{transform-origin:"center";height:100%;width:var(--lk-va-bar-width, 12px);border-radius:var(--lk-va-bar-border-radius, 32px);background-color:var(--lk-va-bar-bg, rgba(136, 136, 136, 0.2));transition:background-color .25s ease-out}.lk-audio-bar-visualizer[data-lk-va-state=speaking]>.lk-audio-bar,.lk-audio-bar-visualizer>.lk-audio-bar.lk-highlighted,.lk-audio-bar-visualizer>[data-lk-highlighted=true]{background-color:var(--lk-fg, rgb(136, 136, 136));transition:none}.lk-audio-bar-visualizer[data-lk-va-state=thinking]{transition:background-color .15s ease-out}.lk-participant-tile{--lk-speaking-indicator-width: 2.5px;position:relative;display:flex;flex-direction:column;gap:.375rem;overflow:hidden;border-radius:var(--lk-border-radius)}.lk-participant-tile::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-radius:var(--lk-border-radius);border:0px solid var(--lk-accent-bg);transition-property:border opacity;transition-delay:.5s;transition-duration:.4s;pointer-events:none}.lk-participant-tile[data-lk-speaking=true]:not([data-lk-source=screen_share])::after{transition-delay:0s;transition-duration:.2s;border-width:var(--lk-speaking-indicator-width)}.lk-participant-tile .lk-focus-toggle-button{position:absolute;top:.25rem;right:.25rem;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2);opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile:hover .lk-focus-toggle-button,.lk-participant-tile:focus .lk-focus-toggle-button{opacity:1;transition-delay:0}.lk-participant-tile .lk-connection-quality{opacity:0;transition:opacity .2s ease-in-out;transition-delay:.2s}.lk-participant-tile .lk-connection-quality[data-lk-quality=poor]{opacity:1;transition-delay:0}.lk-participant-tile:hover .lk-connection-quality,.lk-participant-tile:focus .lk-connection-quality{opacity:1;transition-delay:0}.lk-participant-tile .lk-participant-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--lk-bg2);opacity:0;transition:opacity .2s ease-in-out;pointer-events:none;border-radius:var(--lk-border-radius)}.lk-participant-tile .lk-participant-placeholder svg{height:100%;width:auto;padding:10%}.lk-participant-tile[data-lk-video-muted=true][data-lk-source=camera] .lk-participant-placeholder{opacity:1}.lk-participant-metadata{position:absolute;right:.25rem;bottom:.25rem;left:.25rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;line-height:1}.lk-participant-metadata-item{display:flex;align-items:center;padding:.25rem;background-color:rgba(0,0,0,.5);border-radius:calc(var(--lk-border-radius)/2)}.lk-toast{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow)}.lk-spinner{animation:lk-rotate 2s infinite linear}@keyframes lk-rotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.lk-room-container{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-room-container{position:relative;width:100%;height:100%;--lk-has-imported-styles: "true"}.lk-room-container *[class^=lk-],.lk-room-container *[class*=" lk-"]{box-sizing:border-box}.lk-audio-conference{position:relative;width:100%;height:100%}.lk-audio-conference-stage{width:100%;height:100%;display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}.lk-chat{display:grid;grid-template-rows:var(--lk-chat-header-height) 1fr var(--lk-control-bar-height);width:clamp(200px,55ch,60ch);background-color:var(--lk-bg2);border-left:1px solid var(--lk-border-color);align-items:end}.lk-chat-header{height:var(--lk-chat-header-height);padding:.75rem;position:relative;display:flex;align-items:center;justify-content:center}.lk-chat-header .lk-close-button{position:absolute;right:0;transform:translateX(-50%);background-color:rgba(0,0,0,0)}.lk-chat-header .lk-close-button:hover{background-color:var(--lk-control-active-hover-bg)}.lk-chat-messages{display:flex;width:100%;max-height:100%;flex-direction:column;gap:.25rem;overflow:auto}.lk-chat-entry{display:flex;flex-direction:column;gap:.25rem;margin:0 .25rem}.lk-chat-entry .lk-meta-data{font-size:.75rem;color:var(--lk-fg5);white-space:nowrap;padding:0 .3rem;display:flex}.lk-chat-entry .lk-meta-data .lk-participant-name{margin-top:1rem}.lk-chat-entry .lk-meta-data .lk-timestamp{margin-left:auto;align-self:flex-end}.lk-chat-entry .lk-edit-button{background:none;float:right;margin:0;padding:0 .25rem;border-radius:0;font-size:12px}.lk-chat-entry .lk-message-body{display:inline-block;border-radius:15px;padding:.25rem .75rem;word-break:break-word;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 32px)}.lk-chat-entry[data-lk-message-origin=local] .lk-message-body{background-color:var(--lk-bg5)}.lk-chat-entry[data-lk-message-origin=remote] .lk-message-body{background-color:var(--lk-accent4)}.lk-chat-entry a{text-decoration:underline;color:inherit}.lk-chat-entry *{margin-block-start:.25em;margin-block-end:.25em}.lk-chat-entry:last-child{margin-bottom:.25rem}.lk-chat-form{display:flex;gap:.75rem;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-chat-form-input{font-size:inherit;line-height:inherit;width:100%}@media(max-width: 600px){.lk-chat{position:fixed;top:0;right:0;max-width:100%;bottom:var(--lk-control-bar-height)}}.lk-control-bar,.lk-agent-control-bar{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.75rem;border-top:1px solid var(--lk-border-color);max-height:var(--lk-control-bar-height)}.lk-agent-control-bar{height:var(--lk-control-bar-height);--lk-bg: transparent;--lk-va-bar-width: 2px;--lk-va-bar-gap: 4px;--lk-va-bar-border-radius: 1px}.lk-agent-control-bar .lk-audio-bar-visualizer .lk-audio-bar.lk-highlighted{filter:none}.lk-prejoin{background-color:var(--lk-bg);line-height:var(--lk-line-height)}[data-lk-theme]{font-size:var(--lk-font-size);font-family:var(--lk-font-family);color:var(--lk-fg)}[data-lk-theme] .lk-list{list-style:none;margin:0;padding:0}[data-lk-theme] .lk-form-control{font-family:var(--lk-font-family);padding:.625rem 1rem;background-color:var(--lk-control-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius)}.lk-prejoin{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;margin-inline:auto;background-color:var(--lk-bg);width:min(100%,480px);align-items:stretch}.lk-prejoin .lk-video-container{position:relative;width:100%;height:auto;aspect-ratio:16/10;background-color:#000;border-radius:var(--lk-border-radius);overflow:hidden}.lk-prejoin .lk-video-container video,.lk-prejoin .lk-video-container .lk-camera-off-note{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.lk-prejoin .lk-video-container video[data-lk-facing-mode=user]{transform:rotateY(180deg)}.lk-prejoin .lk-video-container .lk-camera-off-note{position:absolute;top:0px;left:0px;width:100%;aspect-ratio:16/10;background-color:#000;display:grid;place-items:center}.lk-prejoin .lk-video-container .lk-camera-off-note>*{height:70%;max-width:100%}.lk-prejoin .lk-audio-container{display:none}.lk-prejoin .lk-audio-container audio{width:100%;height:auto}.lk-prejoin .lk-button-group-container{display:flex;flex-wrap:nowrap;gap:1rem}.lk-prejoin .lk-button-group-container>.lk-button-group{width:50%}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button{justify-content:left}.lk-prejoin .lk-button-group-container>.lk-button-group>.lk-button:first-child{width:100%}@media(max-width: 400px){.lk-prejoin .lk-button-group-container{flex-wrap:wrap}.lk-prejoin .lk-button-group-container>.lk-button-group{width:100%}}.lk-prejoin .lk-username-container{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:100%}.lk-prejoin .lk-join-button{--lk-control-fg: var(--lk-accent-fg);--lk-control-bg: var(--lk-accent-bg);--lk-control-hover-bg: var(--lk-accent2);--lk-control-active-bg: var(--lk-accent3);--lk-control-active-hover-bg: var(--lk-accent4);background-color:var(--lk-control-bg)}.lk-prejoin .lk-join-button:hover{background-color:var(--lk-control-hover-bg)}.lk-focus-layout-wrapper,.lk-grid-layout-wrapper{position:relative;display:flex;justify-content:center;width:100%;height:calc(100% - var(--lk-control-bar-height))}.lk-grid-layout-wrapper{flex-direction:column;align-items:center}.lk-focus-layout-wrapper{align-items:stretch}.lk-video-conference{position:relative;display:flex;align-items:stretch;height:100%}.lk-video-conference-inner{display:flex;flex-direction:column;align-items:stretch;width:100%}.lk-settings-menu-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:var(--lk-bg);padding:1rem;border-radius:var(--lk-border-radius);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--lk-bg);border:1px solid var(--lk-border-color);border-radius:var(--lk-border-radius);box-shadow:var(--lk-box-shadow);min-width:50vw;min-height:50vh;max-width:100%;max-height:100%;overflow-y:auto}
/*# sourceMappingURL=index.css.map *//* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ 
/* This file is created by the copy-css-files.mjs script in packages/tldraw. */
/* It combines @tldraw/editor's editor.css and tldraw's ui.css */

/* @tldraw/editor */

.tl-container {
	width: 100%;
	height: 100%;
	font-size: 12px;
	/* Spacing */
	--tl-space-1: 2px;
	--tl-space-2: 4px;
	--tl-space-3: 8px;
	--tl-space-4: 12px;
	--tl-space-5: 16px;
	--tl-space-6: 20px;
	--tl-space-7: 28px;
	--tl-space-8: 32px;
	--tl-space-9: 64px;
	--tl-space-10: 72px;
	/* Radius */
	--tl-radius-0: 2px;
	--tl-radius-1: 4px;
	--tl-radius-2: 6px;
	--tl-radius-3: 9px;
	--tl-radius-4: 11px;

	/* Canvas z-index */
	--tl-layer-canvas-hidden: -999999;
	--tl-layer-canvas-background: 100;
	--tl-layer-canvas-grid: 150;
	--tl-layer-watermark: 200;
	--tl-layer-canvas-shapes: 300;
	--tl-layer-canvas-overlays: 500;
	--tl-layer-canvas-in-front: 600;
	--tl-layer-canvas-blocker: 10000;

	/* Canvas overlays z-index */
	--tl-layer-overlays-collaborator-scribble: 10;
	--tl-layer-overlays-collaborator-brush: 20;
	--tl-layer-overlays-collaborator-shape-indicator: 30;
	--tl-layer-overlays-user-scribble: 40;
	--tl-layer-overlays-user-brush: 50;
	--tl-layer-overlays-user-snapline: 90;
	--tl-layer-overlays-selection-fg: 100;
	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
	--tl-layer-overlays-user-handles: 105;
	--tl-layer-overlays-user-indicator-hint: 110;
	--tl-layer-overlays-custom: 115;
	--tl-layer-overlays-collaborator-cursor-hint: 120;
	--tl-layer-overlays-collaborator-cursor: 130;

	/* Text editor z-index */
	--tl-layer-text-container: 1;
	--tl-layer-text-content: 3;
	--tl-layer-text-editor: 4;

	/* Error fallback z-index */
	--tl-layer-error-overlay: 1;
	--tl-layer-error-canvas: 2;
	--tl-layer-error-canvas-after: 3;
	--tl-layer-error-content: 4;

	/* Misc */
	--tl-zoom: 1;

	/* Cursor SVGs */
	--tl-cursor-none: none;
	--tl-cursor-default:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>")
			12 8,
		default;
	--tl-cursor-pointer:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>")
			14 10,
		pointer;
	--tl-cursor-cross:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
			16 16,
		crosshair;
	--tl-cursor-move:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
			16 16,
		move;
	--tl-cursor-grab:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>")
			16 16,
		grab;
	--tl-cursor-grabbing:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>")
			16 16,
		grabbing;
	--tl-cursor-text:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>")
			4 10,
		text;
	--tl-cursor-zoom-in:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
			16 16,
		zoom-in;
	--tl-cursor-zoom-out:
		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>")
			16 16,
		zoom-out;

	/* These cursor values get programmatically overridden */
	/* They're just here to help your editor autocomplete */
	--tl-cursor: var(--tl-cursor-default);
	--tl-cursor-resize-edge: ew-resize;
	--tl-cursor-resize-corner: nesw-resize;
	--tl-cursor-ew-resize: ew-resize;
	--tl-cursor-ns-resize: ns-resize;
	--tl-cursor-nesw-resize: nesw-resize;
	--tl-cursor-nwse-resize: nwse-resize;
	--tl-cursor-rotate: pointer;
	--tl-cursor-nwse-rotate: pointer;
	--tl-cursor-nesw-rotate: pointer;
	--tl-cursor-senw-rotate: pointer;
	--tl-cursor-swne-rotate: pointer;
	--tl-scale: calc(1 / var(--tl-zoom));
	/* fonts */
	--tl-font-draw: 'tldraw_draw', sans-serif;
	--tl-font-sans: 'tldraw_sans', sans-serif;
	--tl-font-serif: 'tldraw_serif', serif;
	--tl-font-mono: 'tldraw_mono', monospace;
	/* text outline */
	--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);
	--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);
	--tl-text-outline-reference:
		0 var(--tl-text-outline-b) 0 var(--tl-color-background),
		0 var(--tl-text-outline-a) 0 var(--tl-color-background),
		var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),
		var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),
		var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),
		var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);
	--tl-text-outline: var(--tl-text-outline-reference);
	/* own properties */
	position: relative;
	inset: 0px;
	height: 100%;
	width: 100%;
	overflow: clip;
	color: var(--tl-color-text);
}

.tl-theme__light {
	/* Canvas */
	--tl-color-snap: hsl(0, 76%, 60%);
	--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
	--tl-color-selection-stroke: hsl(214, 84%, 56%);
	--tl-color-background: hsl(210, 20%, 98%);
	--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
	--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
	--tl-color-grid: hsl(0, 0%, 43%);
	/* UI */
	--tl-color-low: hsl(204, 16%, 94%);
	--tl-color-low-border: hsl(204, 16%, 92%);
	--tl-color-culled: hsl(204, 14%, 93%);
	--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
	--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
	--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
	--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);
	--tl-color-hint: hsl(0, 0%, 0%, 5.5%);
	--tl-color-overlay: hsl(0, 0%, 0%, 20%);
	--tl-color-divider: hsl(0, 0%, 91%);
	--tl-color-panel: hsl(0, 0%, 99%);
	--tl-color-panel-contrast: hsl(0, 0%, 100%);
	--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);
	--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);
	--tl-color-selected: hsl(214, 84%, 56%);
	--tl-color-selected-contrast: hsl(0, 0%, 100%);
	--tl-color-focus: hsl(219, 65%, 50%);
	--tl-color-tooltip: hsla(200, 14%, 4%, 1);
	/* Text */
	--tl-color-text: hsl(0, 0%, 0%);
	--tl-color-text-0: hsl(0, 0%, 11%);
	--tl-color-text-1: hsl(0, 0%, 18%);
	--tl-color-text-3: hsl(204, 4%, 45%);
	--tl-color-text-shadow: hsl(0, 0%, 100%);
	--tl-color-text-highlight: hsl(52, 100%, 50%);
	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);
	/* Named */
	--tl-color-primary: hsl(214, 84%, 56%);
	--tl-color-success: hsl(123, 46%, 34%);
	--tl-color-info: hsl(201, 98%, 41%);
	--tl-color-warning: hsl(27, 98%, 47%);
	--tl-color-danger: hsl(0, 90%, 43%);
	--tl-color-laser: hsl(0, 100%, 50%);
	/* Shadows */
	--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
	--tl-shadow-2:
		0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
	--tl-shadow-3:
		0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
	--tl-shadow-4:
		0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
}

.tl-theme__dark {
	/* Canvas */
	--tl-color-snap: hsl(0, 76%, 60%);
	--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
	--tl-color-selection-stroke: hsl(214, 84%, 56%);
	--tl-color-background: hsl(240, 5%, 6.5%);
	--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
	--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
	--tl-color-grid: hsl(0, 0%, 40%);
	/* UI */
	--tl-color-low: hsl(260, 4.5%, 10.5%);
	--tl-color-low-border: hsl(207, 10%, 10%);
	--tl-color-culled: hsl(210, 11%, 19%);
	--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
	--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
	--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
	--tl-color-muted-2: hsl(0, 0%, 100%, 5%);
	--tl-color-hint: hsl(0, 0%, 100%, 7%);
	--tl-color-overlay: hsl(0, 0%, 0%, 50%);
	--tl-color-divider: hsl(240, 9%, 22%);
	--tl-color-panel: hsl(235, 6.8%, 13.5%);
	--tl-color-panel-contrast: hsl(245, 12%, 23%);
	--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);
	--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
	--tl-color-selected: hsl(217, 89%, 61%);
	--tl-color-selected-contrast: hsl(0, 0%, 100%);
	--tl-color-focus: hsl(217, 76%, 80%);
	--tl-color-tooltip: hsla(0, 0%, 100%, 1);
	/* Text */
	--tl-color-text: hsl(210, 17%, 98%);
	--tl-color-text-0: hsl(0, 9%, 94%);
	--tl-color-text-1: hsl(0, 0%, 85%);
	--tl-color-text-3: hsl(204, 4%, 75%);
	--tl-color-text-shadow: hsl(210, 13%, 18%);
	--tl-color-text-highlight: hsl(52, 100%, 41%);
	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);
	/* Named */
	--tl-color-primary: hsl(214, 84%, 56%);
	--tl-color-success: hsl(123, 38%, 57%);
	--tl-color-info: hsl(199, 92%, 56%);
	--tl-color-warning: hsl(36, 100%, 57%);
	--tl-color-danger: hsl(0, 82%, 66%);
	--tl-color-laser: hsl(0, 100%, 50%);
	/* Shadows */
	--tl-shadow-1:
		0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
	--tl-shadow-2:
		0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),
		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
	--tl-shadow-3:
		0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
}

.tl-counter-scaled {
	transform: scale(var(--tl-scale));
	transform-origin: top left;
	width: calc(100% * var(--tl-zoom));
	height: calc(100% * var(--tl-zoom));
}

.tl-container,
.tl-container * {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	scrollbar-highlight-color: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
	box-sizing: border-box;
	outline: none;
}

.tl-container a {
	-webkit-touch-callout: initial;
}

.tl-container__focused {
	outline: 1px solid var(--tl-color-low);
}

input,
*[contenteditable],
*[contenteditable] * {
	-webkit-user-select: text;
	   -moz-user-select: text;
	        user-select: text;
}

/* --------------------- Canvas --------------------- */

.tl-canvas {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	color: var(--tl-color-text);
	cursor: var(--tl-cursor);
	overflow: clip;
	content-visibility: auto;
	touch-action: none;
	contain: strict;
}

.tl-canvas__in-front {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--tl-layer-canvas-in-front);
}

.tl-shapes {
	position: relative;
	z-index: var(--tl-layer-canvas-shapes);
}

.tl-overlays {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	contain: strict;
	pointer-events: none;
	z-index: var(--tl-layer-canvas-overlays);
}

.tl-overlays__item {
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: visible;
	pointer-events: none;
	transform-origin: top left;
}

.tl-svg-context {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ------------------- Background ------------------- */

.tl-background__wrapper {
	z-index: var(--tl-layer-canvas-background);
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
}

.tl-background {
	background-color: var(--tl-color-background);
	width: 100%;
	height: 100%;
}

/* --------------------- Grid Layer --------------------- */

.tl-grid {
	position: absolute;
	inset: 0px;
	width: 100%;
	height: 100%;
	touch-action: none;
	pointer-events: none;
	z-index: var(--tl-layer-canvas-grid);
	contain: strict;
}

.tl-grid-dot {
	fill: var(--tl-color-grid);
}

/* --------------------- Layers --------------------- */

.tl-html-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1px;
	height: 1px;
	contain: layout style size;
}

/* --------------- Overlay Stack --------------- */

/* back of the stack, behind user's stuff */
.tl-collaborator__scribble {
	z-index: var(--tl-layer-overlays-collaborator-scribble);
}

.tl-collaborator__brush {
	z-index: var(--tl-layer-overlays-collaborator-brush);
}

.tl-collaborator__shape-indicator {
	z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
}

.tl-user-scribble {
	z-index: var(--tl-layer-overlays-user-scribble);
}

.tl-user-brush {
	z-index: var(--tl-layer-overlays-user-brush);
}

.tl-user-handles {
	z-index: var(--tl-layer-overlays-user-handles);
}

.tl-user-snapline {
	z-index: var(--tl-layer-overlays-user-snapline);
}

.tl-selection__fg {
	pointer-events: none;
	z-index: var(--tl-layer-overlays-selection-fg);
}

.tl-user-indicator__hint {
	z-index: var(--tl-layer-overlays-user-indicator-hint);
	stroke-width: calc(2.5px * var(--tl-scale));
}

.tl-custom-overlays {
	z-index: var(--tl-layer-overlays-custom);
}

/* behind collaborator cursor */
.tl-collaborator__cursor-hint {
	z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
}

.tl-collaborator__cursor {
	z-index: var(--tl-layer-overlays-collaborator-cursor);
}

.tl-cursor {
	overflow: visible;
}

/* -------------- Selection foreground -------------- */

.tl-selection__bg {
	position: absolute;
	top: 0px;
	left: 0px;
	transform-origin: top left;
	background-color: transparent;
	pointer-events: all;
}

.tl-selection__fg__outline {
	fill: none;
	pointer-events: none;
	stroke: var(--tl-color-selection-stroke);
	stroke-width: calc(1.5px * var(--tl-scale));
}

.tl-corner-handle {
	pointer-events: none;
	stroke: var(--tl-color-selection-stroke);
	fill: var(--tl-color-background);
	stroke-width: calc(1.5px * var(--tl-scale));
}

.tl-text-handle {
	pointer-events: none;
	fill: var(--tl-color-selection-stroke);
}

.tl-corner-crop-handle {
	pointer-events: none;
	fill: none;
	stroke: var(--tl-color-selection-stroke);
}

.tl-corner-crop-edge-handle {
	pointer-events: none;
	fill: none;
	stroke: var(--tl-color-selection-stroke);
}

.tl-mobile-rotate__bg {
	pointer-events: all;
	cursor: var(--tl-cursor-grab);
}

.tl-mobile-rotate__fg {
	pointer-events: none;
	stroke: var(--tl-color-selection-stroke);
	fill: var(--tl-color-background);
	stroke-width: calc(1.5px * var(--tl-scale));
}

.tl-transparent {
	fill: transparent;
	stroke: transparent;
}

.tl-hidden {
	opacity: 0;
	pointer-events: none;
}

/* -------------- Nametag / cursor chat ------------- */

.tl-nametag {
	position: absolute;
	top: 16px;
	left: 13px;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	max-width: 120px;
	padding: 3px 6px;
	white-space: nowrap;
	position: absolute;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	font-family: var(--font-body);
	border-radius: var(--tl-radius-2);
	color: var(--tl-color-selected-contrast);
}

.tl-nametag-title {
	position: absolute;
	top: -2px;
	left: 13px;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	padding: 0px 6px;
	max-width: 120px;
	white-space: nowrap;
	position: absolute;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	font-family: var(--font-body);
	text-shadow: var(--tl-text-outline);
	color: var(--tl-color-selected-contrast);
}

.tl-nametag-chat {
	position: absolute;
	top: 16px;
	left: 13px;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	color: var(--tl-color-selected-contrast);
	white-space: nowrap;
	position: absolute;
	padding: 3px 6px;
	font-size: 12px;
	font-family: var(--font-body);
	opacity: 1;
	border-radius: var(--tl-radius-2);
}

.tl-cursor-chat {
	position: absolute;
	color: var(--tl-color-selected-contrast);
	white-space: nowrap;
	padding: 3px 6px;
	font-size: 12px;
	font-family: var(--font-body);
	pointer-events: none;
	z-index: var(--tl-layer-cursor);
	margin-top: 16px;
	margin-left: 13px;
	opacity: 1;
	border: none;
	-webkit-user-select: text;
	   -moz-user-select: text;
	        user-select: text;
	border-radius: var(--tl-radius-2);
}

.tl-cursor-chat .tl-cursor-chat__bubble {
	padding-right: 12px;
}

.tl-cursor-chat::-moz-selection {
	background: var(--tl-color-selected);
	color: var(--tl-color-selected-contrast);
	text-shadow: none;
}

.tl-cursor-chat::selection {
	background: var(--tl-color-selected);
	color: var(--tl-color-selected-contrast);
	text-shadow: none;
}

.tl-cursor-chat::-moz-placeholder {
	color: var(--tl-color-selected-contrast);
	opacity: 0.7;
}

.tl-cursor-chat::placeholder {
	color: var(--tl-color-selected-contrast);
	opacity: 0.7;
}

/* ---------------------- Text ---------------------- */

.tl-text-shape-label {
	position: relative;
	font-weight: normal;
	min-width: 1px;
	padding: 0px;
	margin: 0px;
	border: none;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	font-variant: normal;
	font-style: normal;
	pointer-events: all;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.tl-text-wrapper[data-font='draw'] {
	font-family: var(--tl-font-draw);
}

.tl-text-wrapper[data-font='sans'] {
	font-family: var(--tl-font-sans);
}

.tl-text-wrapper[data-font='serif'] {
	font-family: var(--tl-font-serif);
}

.tl-text-wrapper[data-font='mono'] {
	font-family: var(--tl-font-mono);
}

.tl-text-wrapper[data-align='start'],
.tl-text-wrapper[data-align='start-legacy'] {
	text-align: left;
}

.tl-text-wrapper[data-align='middle'],
.tl-text-wrapper[data-align='middle-legacy'] {
	text-align: center;
}

.tl-text-wrapper[data-align='end'],
.tl-text-wrapper[data-align='end-legacy'] {
	text-align: right;
}

.tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {
	opacity: 0;
}

.tl-rich-text-wrapper[data-isediting='true'] .tl-text-content {
	display: none;
}

.tl-text {
	/* remove overflow from textarea on windows */
	margin: 0px;
	padding: 0px;

	-webkit-appearance: auto;

	   -moz-appearance: auto;

	        appearance: auto;
	background: none;
	-o-border-image: none;
	   border-image: none;
	border: 0px;
	caret-color: var(--tl-color-text);
	color: inherit;
	-moz-column-count: initial !important;
	     column-count: initial !important;
	display: inline-block;
	font-family: inherit;
	font-feature-settings: normal;
	font-kerning: auto;
	font-optical-sizing: auto;
	font-size: inherit;
	font-stretch: 100%;
	font-style: inherit;
	font-variant: inherit;
	font-variation-settings: normal;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	outline: none;
	overflow-wrap: break-word;
	text-align: inherit;
	text-indent: 0px;
	text-rendering: auto;
	text-shadow: inherit;
	text-transform: none;
	white-space: pre-wrap;
	line-break: normal;
	word-spacing: 0px;
	word-wrap: break-word;
	writing-mode: horizontal-tb !important;
}

.tl-text-measure {
	z-index: var(--tl-layer-canvas-hidden);
	opacity: 0;
	visibility: hidden;

	/* pointer-events: all; */
	/* opacity: 1; */
	/* z-index: 99999;  */

	position: absolute;
	top: 0px;
	left: 0px;
	width: -moz-max-content;
	width: max-content;
	box-sizing: border-box;
	pointer-events: none;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
	resize: none;
	border: none;
	-moz-user-select: none;
	     user-select: none;
	contain: layout style paint;
	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
	unicode-bidi: plaintext;
	-webkit-user-select: none;
}

.tl-text-input,
.tl-text-content {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	min-width: 1px;
	min-height: 1px;
	outline: none;
}

.tl-text-content__wrapper {
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	min-height: auto;
}

.tl-text-content {
	overflow: visible;
	pointer-events: none;
}

.tl-text-input {
	resize: none;
	-moz-user-select: all;
	     user-select: all;
	-webkit-user-select: text;
	cursor: var(--tl-cursor-text);
}

.tl-text-input:not(.tl-rich-text) {
	/*
	 * Note: this `overflow: hidden` is key for scrollbars to not show up
	 * plaintext/<textarea> editors.
	 */
	overflow: hidden;
}

.tl-text-input::-moz-selection {
	background: var(--tl-color-selected);
	color: var(--tl-color-selected-contrast);
	text-shadow: none;
}

.tl-text-input::selection {
	background: var(--tl-color-selected);
	color: var(--tl-color-selected-contrast);
	text-shadow: none;
}

/* Text label */

.tl-text-label {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--tl-color-text);
	line-height: inherit;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
}

.tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {
	width: 40px;
	height: 40px;
}

.tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content {
	pointer-events: all;
}

.tl-text-label__inner > .tl-text-input.tl-rich-text {
	display: none;
	position: static;
}

.tl-text-wrapper[data-isediting='false'] .tl-text-input {
	opacity: 0;
	cursor: var(--tl-cursor-default);
}

.tl-rich-text[data-is-ready-for-editing='true'],
.tl-text-wrapper[data-is-ready-for-editing='true'] .tl-text-input {
	cursor: var(--tl-cursor-text);
}

.tl-text-label[data-textwrap='true'] > .tl-text-label__inner {
	max-width: 100%;
}

.tl-text-label[data-isediting='true'] {
	background-color: transparent;
	min-height: auto;
}

.tl-text-wrapper .tl-text-content {
	pointer-events: all;
	z-index: var(--tl-layer-text-content);
}

.tl-text-label__inner > .tl-text-content {
	position: relative;
	top: 0px;
	left: 0px;
	padding: inherit;
	height: -moz-fit-content;
	height: fit-content;
	width: -moz-fit-content;
	width: fit-content;
	border-radius: var(--tl-radius-1);
	max-width: 100%;
}

.tl-text-label__inner > .tl-text-input {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	padding: inherit;
}

.tl-text-wrapper[data-isselected='true'] .tl-text-input {
	z-index: var(--tl-layer-text-editor);
	pointer-events: all;
}

/* This part of the rule helps preserve the occlusion rules for the shapes so we
 * don't click on shapes that are behind other shapes.
 * One extra nuance is we don't use this behavior for:
 *  - arrows which have weird geometry and just gets in the way.
 *  - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield
 *  - shapes that are not filled
 */
.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])
	.tl-shape:not(
		[data-shape-type='arrow'],
		[data-shape-type='draw'],
		[data-shape-type='line'],
		[data-shape-type='highlight'],
		[data-shape-is-filled='false']
	) {
	pointer-events: all;
}

.tl-rich-text .ProseMirror {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;

	/**
	 * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31
	 * However, that was from 8 years ago and the browser caret issue
	 * it mentions seems to be fixed. So, we're re-enabling it.
	 * We'll tell ProseMirror maybe to get rid of this on their end.
	 *
	 */
	font-variant-ligatures: inherit;
	font-feature-settings: inherit;

	/**
	 * N.B. This following CSS Rule comes standard with the tiptap editor.
	 * Combined with the above rule that it supersedes, it allows for
	 * the auto-linking to work in text. Say, when typing example.com
	 * this helps it automatically turn that bit of text into a link.
	 *
	 * However, specifically, the break-spaces features seems to cause
	 * rendering differences when going in-and-out of edit mode. For example,
	 * the statically rendered text 'the rain in spain falls mainly on the plain'
	 * in a note shape will render differently when going in-and-out of edit mode.
	 *
	 * So, this is commented out to help make both the autolinking work (which now
	 * relies on the white-space: pre-wrap to work and to make the static/edit-mode
	 * rendering consistent.
	 * In the future, we might consider just making the static rendering just use
	 * white-space: break-spaces to make it consistent with the edit mode if need be.
	 *
	 * Also, the amount of ink I've spilt in my career writing comments explaining
	 * white-space in contenteditable is incredible.
	 *
	/* white-space: break-spaces; */
}

.tl-rich-text p {
	margin: 0;
	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
	min-height: 1lh;
}

.tl-rich-text ul,
.tl-rich-text ol {
	text-align: left;
	margin: 0;
	padding-left: 3.25ch;
	/* Some resets, like Tailwind, nix the list styling. */
	list-style: revert;
}

.tl-rich-text ol:has(> li:nth-child(10)) {
	padding-left: 4.25ch;
}

.tl-rich-text ol:has(> li:nth-child(100)) {
	padding-left: 5.25ch;
}

.tl-rich-text h1,
.tl-rich-text h2,
.tl-rich-text h3,
.tl-rich-text h4,
.tl-rich-text h5,
.tl-rich-text h6 {
	margin-top: 5px;
	margin-bottom: 10px;
}

.tl-rich-text a {
	color: var(--tl-color-primary);
	text-decoration: underline;
}

.tl-rich-text[data-is-select-tool-active='false'] a {
	cursor: inherit;
}

.tl-rich-text code {
	font-family: var(--tl-font-mono);
}

.tl-rich-text mark {
	background-color: #fddd00;
	color: currentColor;
	border-radius: 2px;
}

.tl-theme__light .tl-rich-text mark {
	text-shadow: none;
}

.tl-theme__dark .tl-rich-text mark {
	background-color: var(--tl-color-text-highlight);
	color: currentColor;
}

@supports (color: color(display-p3 1 1 1)) {
	@media (color-gamut: p3) {
		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {
			background-color: var(--tl-color-text-highlight-p3);
		}
	}
}

.tl-text-wrapper[data-isediting='true'] .tl-rich-text {
	display: block;
}

.tl-text__outline {
	text-shadow: var(--tl-text-outline);
}

.tl-text__no-outline {
	text-shadow: none;
}

/* --------------------- Loading -------------------- */

.tl-loading {
	background-color: var(--tl-color-background);
	color: var(--tl-color-text-1);
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--tl-space-2);
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	animation: tl-fade-in 0.2s ease-in-out forwards;
	animation-delay: 0.2s;
	position: absolute;
	inset: 0px;
	z-index: var(--tl-layer-canvas-blocker);
}

@keyframes tl-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.tl-spinner {
	animation: tl-spin 1s linear infinite;
}

@keyframes tl-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ---------------------- Brush --------------------- */

.tl-brush {
	stroke-width: calc(var(--tl-scale) * 1px);
	contain: size layout;
}

.tl-brush__default {
	stroke: var(--tl-color-brush-stroke);
	fill: var(--tl-color-brush-fill);
}

/* -------------------- Scribble -------------------- */

.tl-scribble {
	stroke-linejoin: round;
	stroke-linecap: round;
	pointer-events: none;
	contain: size layout;
}

/* ---------------------- Snaps --------------------- */

.tl-snap-indicator {
	stroke: var(--tl-color-snap);
	stroke-width: calc(1px * var(--tl-scale));
	fill: none;
}

.tl-snap-point {
	stroke: var(--tl-color-snap);
	stroke-width: calc(1px * var(--tl-scale));
	fill: none;
}

/* ---------------- Hyperlink Button ---------------- */

.tl-hyperlink-button {
	background: none;
	margin: 0px;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 44px;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 400;
	color: var(--tl-color-text-1);
	padding: 13px;
	cursor: var(--tl-cursor-pointer);
	border: none;
	outline: none;
	pointer-events: all;
	z-index: 1;
}

.tl-hyperlink-button::after {
	content: '';
	z-index: -1;
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: block;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border-radius: var(--tl-radius-1);
	background-color: var(--tl-color-background);
	pointer-events: none;
}

.tl-hyperlink-button:focus-visible {
	color: var(--tl-color-selected);
}

.tl-hyperlink__icon {
	width: 15px;
	height: 15px;
	background-color: currentColor;
	pointer-events: none;
}

.tl-hyperlink-button__hidden {
	display: none;
}

/* --------------------- Handles -------------------- */

.tl-handle {
	pointer-events: all;
}

.tl-handle__bg {
	fill: transparent;
	stroke: transparent;
	pointer-events: all;
}

.tl-handle__fg {
	fill: var(--tl-color-selected-contrast);
	stroke: var(--tl-color-selection-stroke);
	stroke-width: calc(1.5px * var(--tl-scale));
	pointer-events: none;
}

.tl-handle__create {
	opacity: 0;
}

.tl-handle__clone > .tl-handle__fg {
	fill: var(--tl-color-selection-stroke);
	stroke: none;
}

.tl-handle__bg:active {
	fill: none;
}

.tl-container[data-coarse='true'] .tl-handle__bg:active {
	fill: var(--tl-color-selection-fill);
}

.tl-container[data-coarse='true'] .tl-handle__create {
	opacity: 1;
}

.tl-rotate-corner:not(:hover),
.tl-resize-handle:not(:hover) {
	cursor: none;
}

/* ----------------- Shape indicator ---------------- */

.tl-shape-indicator {
	transform-origin: top left;
	fill: none;
	stroke-width: calc(1.5px * var(--tl-scale));
	contain: size layout;
}

/* ---------------------- Shape --------------------- */

.tl-shape {
	position: absolute;
	pointer-events: none;
	overflow: visible;
	transform-origin: top left;
	contain: size layout;
}

/* ---------------- Shape Containers ---------------- */

.tl-svg-container {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform-origin: top left;
	overflow: visible;
}

.tl-html-container {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	pointer-events: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* content-visibility: auto; */
	transform-origin: top left;
	color: var(--tl-color-text-1);
}

/* -------------------- Group shape ------------------ */

.tl-group {
	stroke: var(--tl-color-text);
	stroke-width: calc(1px * var(--tl-scale));
	opacity: 0.5;
}

/* --------------------- Arrow shape -------------------- */

.tl-shape[data-shape-type='arrow'] .tl-text-label {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 2px;
	height: 2px;
	padding: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--tl-color-text);
}

.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
	border-radius: var(--tl-radius-1);
	box-sizing: content-box;
	height: -moz-max-content;
	height: max-content;
	width: -moz-max-content;
	width: max-content;
}

.tl-shape[data-shape-type='arrow'] .tl-text {
	height: -moz-max-content;
	height: max-content;
}

.tl-arrow-hint {
	stroke: var(--tl-color-text-1);
	fill: none;
	stroke-linecap: round;
	overflow: visible;
}

.tl-arrow-hint-handle {
	fill: var(--tl-color-selected-contrast);
	stroke: var(--tl-color-selection-stroke);
	stroke-width: calc(1.5px * var(--tl-scale));
	r: calc(4px * var(--tl-scale));
}

.tl-arrow-hint-snap {
	stroke: transparent;
	fill: var(--tl-color-selection-fill);
	r: calc(12px * var(--tl-scale));
}

.tl-arrow-hint-snap__none,
.tl-arrow-hint-snap__center,
.tl-arrow-hint-snap__axis {
	display: none;
}

.tl-arrow-hint-snap__edge {
	r: calc(8px * var(--tl-scale));
}

/* ------------------- Bookmark shape ------------------- */

.tl-bookmark__container {
	width: 100%;
	height: 100%;
	position: relative;
	border: 1px solid var(--tl-color-panel-contrast);
	background-color: var(--tl-color-panel);
	border-radius: var(--tl-radius-2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.tl-bookmark__container--safariExport {
	border: 1px solid var(--tl-color-divider);
}

.tl-bookmark__image_container {
	flex: 1 1 100%;
	overflow: hidden;
	border-top-left-radius: var(--tl-radius-1);
	border-top-right-radius: var(--tl-radius-1);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);
}

.tl-bookmark__image_container > .tl-hyperlink-button::after {
	background-color: var(--tl-color-panel);
}

.tl-bookmark__placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--tl-color-muted-2);
	border-bottom: 1px solid var(--tl-color-muted-2);
}

.tl-bookmark__image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
	border-bottom: 1px solid var(--tl-color-muted-2);
}

.tl-bookmark__copy_container {
	background-color: var(--tl-color-muted-0);
	padding: var(--tl-space-4);
	pointer-events: all;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
}

.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
	justify-content: center;
}

.tl-bookmark__heading,
.tl-bookmark__description,
.tl-bookmark__link {
	margin: 0px;
	width: 100%;
	font-family: inherit;
}

.tl-bookmark__heading {
	font-size: 16px;
	line-height: 1.6;
	font-weight: bold;
	padding-bottom: var(--tl-space-2);
	overflow: hidden;
	max-height: calc((16px * 1.6) * 2);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
}

.tl-bookmark__description {
	font-size: 12px;
	line-height: 1.5;
	overflow: hidden;
	max-height: calc((12px * 1.5) * 3);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	text-overflow: ellipsis;
	display: -webkit-box;
	color: var(--tl-color-text-1);
	margin: var(--tl-space-2) 0px;
}

.tl-bookmark__heading + .tl-bookmark__link,
.tl-bookmark__description + .tl-bookmark__link {
	margin-top: var(--tl-space-3);
}
.tl-bookmark__link {
	font-size: 12px;
	pointer-events: all;
	display: flex;
	color: var(--tl-color-text-1);
	align-items: center;
	cursor: var(--tl-cursor-pointer);
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	text-decoration: none;
}

.tl-bookmark__link > span {
	flex-shrink: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tl-bookmark__link > .tl-hyperlink__icon {
	margin-right: 8px;
	flex-shrink: 0;
}

.tl-bookmark__link > .tl-bookmark__favicon {
	margin-right: 8px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* -------------- Image and video shape ------------- */

.tl-image,
.tl-video {
	-o-object-fit: cover;
	   object-fit: cover;
	background-size: cover;
	width: 100%;
	height: 100%;
}

.tl-video-container,
.tl-image-container,
.tl-embed-container {
	width: 100%;
	height: 100%;
	pointer-events: all;
	/* background-color: var(--tl-color-background); */

	display: flex;
	justify-content: center;
	align-items: center;
}

.tl-image-container {
	position: relative;
}

.tl-image {
	position: absolute;
	inset: 0;
}

.tl-video.tl-video-is-fullscreen {
	-o-object-fit: contain;
	   object-fit: contain;
	background-size: contain;
}

/* -------------------- Note shape ------------------- */

.tl-note__container {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: all;
	opacity: 1;
	z-index: var(--tl-layer-text-container);
	border-radius: 1px;
}

.tl-note__container > .tl-text-label {
	color: currentColor;
}

/* ------------------- Frame shape ------------------- */

.tl-frame__body {
	stroke-width: calc(1px * var(--tl-scale));
}

.tl-frame__creating {
	stroke: var(--tl-color-selected);
	fill: none;
}

.tl-frame-heading {
	--tl-frame-padding-x: 6px;
	--tl-frame-height: 24px;
	--tl-frame-minimum-width: 32px;
	--tl-frame-offset-width: 16px;
	display: flex;
	align-items: center;
	position: absolute;
	transform-origin: 0% 100%;
	overflow: hidden;
	max-width: 100%;
	min-width: var(--tl-frame-minimum-width);
	height: auto;
	font-size: 12px;
	padding-bottom: 4px;
	pointer-events: all;
}

.tl-frame-heading-hit-area {
	pointer-events: all;
	/* scale from bottom left corner so we can pin it to the top left corner of the frame */
	transform-origin: 0% 100%;
	display: flex;
	height: var(--tl-frame-height);
	width: 100%;
	align-items: center;
	border-radius: var(--tl-radius-1);
}

.tl-frame-label {
	pointer-events: all;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px var(--tl-frame-padding-x);
	border-radius: var(--tl-radius-1);
	position: relative;
	font-size: inherit;
	white-space: pre;
}

.tl-frame-label__editing {
	color: transparent;
	white-space: pre;
	width: auto;
	min-width: var(--tl-frame-minimum-width);
	height: 100%;
	overflow: visible;
	background-color: var(--tl-color-panel);
	border-color: var(--tl-color-selected);
	box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);
}

.tl-frame-name-input {
	position: absolute;
	border: none;
	background: none;
	outline: none;
	padding: 0px var(--tl-frame-padding-x);
	inset: 0px;
	height: 100%;
	width: 100%;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	width: 100%;
	color: var(--tl-color-text-1);
	border-radius: var(--tl-radius-1);
	-moz-user-select: all;
	     user-select: all;
	-webkit-user-select: text;
	white-space: pre;
	cursor: var(--tl-cursor-text);
}

/* If mobile use 16px as font size */
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
@media (max-width: 600px) {
	.tl-frame-heading {
		font-size: 16px;
	}
}

/* ------------------- Embed Shape ------------------ */

.tl-embed {
	border: none;
	border-radius: var(--tl-radius-2);
}

/* -------------- Shape error boundary -------------- */

.tl-shape-error-boundary {
	width: 100%;
	height: 100%;
	background-color: var(--tl-color-muted-1);
	border-width: calc(1px * var(--tl-scale));
	border-color: var(--tl-color-muted-1);
	border-style: solid;
	border-radius: calc(var(--tl-radius-1) * var(--tl-scale));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: left;
	position: relative;
	pointer-events: all;
	overflow: hidden;
	padding: var(--tl-space-2);
}

.tl-shape-error-boundary::before {
	transform: scale(var(--tl-scale));
	content: 'Error';
	font-size: 12px;
	font-family: inherit;
	color: var(--tl-color-text-0);
}

/* ----------------- Error boundary ----------------- */

.tl-error-boundary {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tl-space-4);
	background-color: var(--tl-color-background);
	color: var(--tl-color-text-1);
	position: absolute;
}

.tl-error-boundary__overlay {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-overlay);
	background-color: var(--tl-color-overlay);
}

.tl-error-boundary__content * {
	-moz-user-select: all;
	     user-select: all;
	-webkit-user-select: text;
	pointer-events: all;
}

.tl-error-boundary__canvas {
	pointer-events: none;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-canvas);
}

/* some browsers seem to have some weird interactions between stacking contexts
and pointer-events. this ::after pseudo element covers the canvas and prevents
it from receiving any pointer events or affecting the cursor. */
.tl-error-boundary__canvas::after {
	content: ' ';
	display: block;
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	z-index: var(--tl-layer-error-canvas-after);
	pointer-events: all;
}

.tl-error-boundary__content {
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	max-width: 100%;
	width: 400px;
	max-height: 100%;
	background-color: var(--tl-color-panel);
	padding: 16px;
	border-radius: 16px;
	box-shadow: var(--tl-shadow-2);
	font-size: 14px;
	font-weight: 400;
	display: flex;
	flex-direction: column;
	overflow: auto;
	z-index: var(--tl-layer-error-content);
	gap: 12px;
}

.tl-error-boundary__content__expanded {
	width: 600px;
}

.tl-error-boundary__content h2 {
	font-size: 16px;
	margin: 0px;
	font-weight: 500;
}

.tl-error-boundary__content h4 {
	border: 1px solid var(--tl-color-low-border);
	margin: -6px 0 0 0;
	padding: var(--tl-space-5);
	border-radius: var(--tl-radius-2);
	font-weight: normal;
}

.tl-error-boundary__content p {
	line-height: 1.5;
	margin: 0px;
}

.tl-error-boundary__content pre {
	background-color: var(--tl-color-muted-2);
	margin-top: 0;
	padding: var(--tl-space-5);
	border-radius: var(--tl-radius-2);
	overflow: auto;
	font-size: 12px;
	max-height: 320px;
}

.tl-error-boundary__content button {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: var(--tl-space-4);
	border-radius: var(--tl-radius-3);
	cursor: var(--tl-cursor-pointer);
	color: inherit;
	background-color: transparent;
}

.tl-error-boundary__content a {
	color: var(--tl-color-selected);
	font-weight: 500;
	text-decoration: none;
}

.tl-error-boundary__content__error {
	position: relative;
	margin: -6px 0 0 0;
}

.tl-error-boundary__content__error button {
	position: absolute;
	top: var(--tl-space-2);
	right: var(--tl-space-2);
	font-size: 12px;
	padding: var(--tl-space-2) var(--tl-space-3);
	background-color: var(--tl-color-panel);
	border-radius: var(--tl-radius-1);
}

.tl-error-boundary__content__actions {
	display: flex;
	justify-content: space-between;
	gap: var(--tl-space-4);
	margin: 0px;
	margin-left: -4px;
}
.tl-error-boundary__content__actions__group {
	display: flex;
	gap: var(--tl-space-4);
}
.tl-error-boundary__content .tl-error-boundary__reset {
	color: var(--tl-color-danger);
}
.tl-error-boundary__content .tl-error-boundary__refresh {
	background-color: var(--tl-color-primary);
	color: var(--tl-color-selected-contrast);
}
.tl-container__focused:not(.tl-container__no-focus-ring)
	.tlui-button.tl-error-boundary__refresh:focus-visible {
	border-radius: 8px;
	outline-offset: 0;
}

/* ---------------- Hit test blocker ---------------- */

.tl-hit-test-blocker {
	position: absolute;
	z-index: var(--tl-layer-canvas-blocker);
	inset: 0px;
	width: 100%;
	height: 100%;
	pointer-events: all;
}

.tl-hit-test-blocker__hidden {
	display: none;
}

/* --------------------- Hovers --------------------- */

@media (hover: hover) {
	.tl-handle__create:hover {
		opacity: 1;
	}

	.tl-handle__bg:hover {
		cursor: var(--tl-cursor-grab);
		fill: var(--tl-color-selection-fill);
	}

	.tl-bookmark__link:hover {
		color: var(--tl-color-selected);
	}

	.tl-hyperlink-button:hover {
		color: var(--tl-color-selected);
	}

	.tl-error-boundary__content button:hover {
		background-color: var(--tl-color-low);
	}
	.tl-error-boundary__content a:hover {
		color: var(--tl-color-text-1);
	}
	.tl-error-boundary__content .tl-error-boundary__refresh:hover {
		background-color: var(--tl-color-primary);
		opacity: 0.9;
	}

	/* These three rules help preserve clicking into specific points in text areas *while*
 * already in edit mode when jumping from shape to shape. */
	.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {
		z-index: var(--tl-layer-text-editor);
		pointer-events: all;
	}
}

/* @tldraw/ui */

.tl-container {
	--tl-layer-above: 1;
	--tl-layer-focused-input: 10;
	--tl-layer-menu-click-capture: 250;
	--tl-layer-panels: 300;
	--tl-layer-menus: 400;
	--tl-layer-toasts: 650;
	--tl-layer-cursor: 700;
	--tl-layer-header-footer: 999;
	--tl-layer-following-indicator: 1000;
}

/* Button */

.tlui-button {
	position: relative;
	height: 40px;
	min-width: 40px;
	padding: 0px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: transparent;
	color: currentColor;
	cursor: pointer;
	pointer-events: all;
	font-weight: inherit;
	font-family: inherit;
	line-height: inherit;
	text-rendering: optimizeLegibility;
	font-size: 12px;
	gap: 0px;
	color: var(--tl-color-text-1);
	z-index: 0;
}

.tlui-button:disabled {
	color: var(--tl-color-text-3);
	text-shadow: none;
	cursor: default;
}

.tlui-button:disabled .tlui-kbd {
	color: var(--tl-color-text-3);
}

.tlui-button > * {
	position: relative;
	z-index: var(--tl-layer-above);
}

.tlui-button__label {
	font-size: 12px;
	flex-grow: 2;
	text-align: left;
}

/*
 * We only want to show the focus ring if:
 * - the container is focused
 * - we're not using the mouse to interact (which is the .tl-container__no-focus-ring)
 */
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
}
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {
	border-radius: 12px;
}
.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
}

.tlui-button::after {
	display: block;
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: var(--tl-radius-2);
	background: var(--tl-color-muted-2);
	opacity: 0;
}

.tlui-button__menu[data-highlighted]::after {
	opacity: 1;
}

.tlui-button[data-isactive='true']::after,
.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
	background: var(--tl-color-hint);
	opacity: 1;
}

.tlui-button[aria-expanded='true'][data-direction='left'] {
	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

@media (hover: hover) {
	.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {
		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}

	.tlui-button:not(:disabled):hover {
		z-index: 1;
	}

	.tlui-button:not(:disabled):hover::after {
		opacity: 1;
	}
}

.tlui-button__icon + .tlui-button__label {
	margin-left: var(--tl-space-2);
}

/* Low button  */

.tlui-button__low {
	border-radius: var(--tl-radius-3);
	background-color: var(--tl-color-low);
}

.tlui-button__low::after {
	background-color: var(--tl-color-muted-2);
	opacity: 0;
}

@media (hover: hover) {
	.tlui-button__low:hover::after {
		opacity: 1;
	}
}

/* Primary / danger buttons */

.tlui-button__primary {
	color: var(--tl-color-primary);
}

.tlui-button__danger {
	color: var(--tl-color-danger);
	text-shadow: none;
}

@media (hover: hover) {
	.tlui-button__primary:not(:disabled, :focus-visible):hover {
		color: var(--tl-color-primary);
	}

	.tlui-button__danger:not(:disabled, :focus-visible):hover {
		color: var(--tl-color-danger);
		text-shadow: none;
	}
}

/* Menu button */

.tlui-button__menu {
	height: 40px;
	min-height: 40px;
	width: 100%;
	gap: 8px;
	margin-top: -4px;
}

.tlui-button__menu::after {
	inset: 4px;
	border-radius: var(--tl-radius-2);
}

.tlui-button__menu > .tlui-icon + .tlui-button__label {
	margin-left: 0px;
}

.tlui-button__menu:nth-child(1) {
	margin-top: 0px;
}

.tlui-button__menu:nth-last-child(1) {
	margin-bottom: 0px;
}

/* Menu checkbox button */

.tlui-button__checkbox {
	padding-left: 8px;
}

.tlui-button__checkbox__indicator {
	width: 15px;
	height: 15px;
}

/* Tool lock button */

.tlui-main-toolbar__lock-button {
	position: absolute;
	pointer-events: all;
	height: 40px;
	width: 40px;
	border-radius: var(--tl-radius-2);
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
	top: 4px;
	right: 0px;
	min-width: 0px;
}

.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
	bottom: 0px;
	min-height: 0px;
}

.tlui-main-toolbar__lock-button::after {
	top: 4px;
	left: 8px;
	inset: 4px;
}

/* Tool button  */

.tlui-button__tool {
	position: relative;
	height: 48px;
	width: 48px;
}

.tlui-button__tool::after {
	inset: 4px;
	border-radius: 8px;
}

.tlui-button__tool[aria-pressed='true'] {
	color: var(--tl-color-selected-contrast);
}

.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
	color: var(--tl-color-selected-contrast);
}

.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
	background: var(--tl-color-selected);
	opacity: 1;
}

.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
	height: 48px;
	width: 43px;
}

.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
	height: 16px;
	width: 16px;
}

/* Row layout */

.tlui-row {
	display: flex;
	flex-direction: row;
	padding: 0 2px;
}
.tlui-row > * {
	margin-left: -2px;
	margin-right: -2px;
}

/* Column layout */

.tlui-column {
	display: flex;
	flex-direction: column;
	padding: 2px 0;
}
.tlui-column > * {
	margin-top: -2px;
	margin-bottom: -2px;
}

/* Grid layout */

.tlui-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: row;
	overflow: hidden;
	padding: 2px;
}
.tlui-grid > * {
	margin: -2px;
}

/* Zoom button */

.tlui-zoom-menu__button {
	width: 60px;
	min-width: 60px;
	text-align: center;
}

/* --------------------- Layout --------------------- */

.tlui-layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(0px, 1fr) auto;
	grid-auto-rows: auto;
	height: 100%;
	max-height: 100%;
	overflow: clip;
	pointer-events: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	contain: strict;
	z-index: var(--tl-layer-panels);
	transform: translate3d(0, 0, 0);
	--tl-sab: env(safe-area-inset-bottom);
	font-weight: 500;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: antialiased;
	text-rendering: optimizeLegibility;
}

.tlui-layout__top {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	min-width: 0px;
	justify-content: space-between;
}

.tlui-layout__top__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	flex: 0 1 0;
}

.tlui-layout__top__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	height: 100%;
	flex: 0 0 auto;
	min-width: 0px;
}

.tlui-scrollable,
.tlui-scrollable * {
	pointer-events: all;
	touch-action: auto;
	overscroll-behavior: none;
}

/* ----------------- Helper Buttons ---------------- */

.tlui-helper-buttons {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: -moz-min-content;
	width: min-content;
	gap: var(--tl-space-3);
	margin: var(--tl-space-2) var(--tl-space-3);
	white-space: nowrap;
	pointer-events: none;
	z-index: var(--tl-layer-panels);
}

/* ---------------------- Icon ---------------------- */

.tlui-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

.tlui-icon__placeholder {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: transparent;
}

.tlui-icon__small {
	width: 15px;
	height: 15px;
}

/* --------------------- Slider --------------------- */

.tlui-slider__container {
	width: 100%;
	padding: 0px var(--tl-space-4);
}

.tlui-slider {
	position: relative;
	display: flex;
	align-items: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	touch-action: none;
	width: 100%;
}

.tlui-slider__track {
	position: relative;
	flex-grow: 1;
	height: 44px;
	cursor: pointer;
}

.tlui-slider__track::after {
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	content: '';
	height: 3px;
	width: 100%;
	background-color: var(--tl-color-muted-1);
	border-radius: 14px;
}

.tlui-slider__range {
	position: absolute;
	top: calc(50% - 2px);
	left: 0px;
	height: 3px;
	background-color: var(--tl-color-selected);
	border-radius: 14px;
}

.tlui-slider__thumb {
	all: unset;
	cursor: grab;
	display: block;
	width: 18px;
	height: 18px;
	position: relative;
	top: -1px;
	background-color: var(--tl-color-panel);
	border-radius: 999px;
	box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);
}

.tlui-slider__thumb:active {
	cursor: grabbing;
	box-shadow:
		inset 0px 0px 0px 2px var(--tl-color-text-1),
		var(--tl-shadow-1);
}

/* ---------------------- Input --------------------- */

.tlui-input {
	background: none;
	margin: 0px;
	position: relative;
	z-index: var(--tl-layer-above);
	height: 40px;
	max-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 12px;
	font-weight: inherit;
	color: var(--tl-color-text-1);
	padding: var(--tl-space-4);
	padding-left: 0px;
	border: none;
	outline: none;
	text-overflow: ellipsis;
	width: 100%;
	-webkit-user-select: all;
	   -moz-user-select: all;
	        user-select: all;
	text-rendering: optimizeLegibility;
	-webkit-user-select: auto !important;
}

.tlui-input::-moz-placeholder {
	color: var(--tl-color-text-3);
}

.tlui-input::placeholder {
	color: var(--tl-color-text-3);
}

.tlui-input__wrapper {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	gap: var(--tl-space-4);
	color: var(--tl-color-text);
}

.tlui-input__wrapper > .tlui-icon {
	flex-shrink: 0;
}

/* If mobile use 16px as font size */
/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	.tlui-input {
		font-size: 16px;
	}
}

/* ----------------------- Kbd ---------------------- */

.tlui-kbd {
	font-family: inherit;
	font-size: 11px;
	line-height: 11px;
	display: grid;
	justify-items: center;
	grid-auto-flow: column;
	grid-template-columns: auto;
	grid-auto-columns: minmax(1em, auto);
	align-self: bottom;
	color: currentColor;
	margin-left: var(--tl-space-4);
}

.tlui-kbd > span {
	width: 100%;
	text-align: center;
	display: inline;
	margin: 0px;
	padding: 2px;
	border-radius: 2px;
}

.tlui-kbd > span:last-child {
	padding-right: 0;
}

.tlui-kbd:not(:last-child) {
	margin-right: var(--tl-space-2);
}

/* Focus Mode Button */

.tlui-focus-button {
	z-index: var(--tl-layer-panels);
	pointer-events: all;
}

/* ---------------------- Menu ---------------------- */

.tlui-menu:empty {
	display: none;
}

.tlui-menu {
	z-index: var(--tl-layer-menus);
	height: -moz-fit-content;
	height: fit-content;
	width: -moz-fit-content;
	width: fit-content;
	border-radius: var(--tl-radius-3);
	pointer-events: all;
	touch-action: auto;
	overflow-y: auto;
	overscroll-behavior: none;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
}

@media (max-height: 600px) {
	.tlui-menu {
		max-height: 70vh;
	}
}

.tlui-menu::-webkit-scrollbar {
	display: none;
}

/* Menu groups */

.tlui-menu__group {
	width: 100%;
}

.tlui-menu__group:empty {
	display: none;
}

.tlui-menu__group {
	border-bottom: 1px solid var(--tl-color-divider);
}
.tlui-menu__group:nth-last-of-type(1) {
	border-bottom: none;
}

/* Submenu triggers */

.tlui-menu__submenu__trigger {
	--gradient-angle: 90deg;
}

.tlui-menu__submenu__trigger[data-direction='left'] {
	--gradient-angle: 270deg;
}

.tlui-menu__submenu__trigger[data-state='open']::after {
	opacity: 1;
	background: linear-gradient(
		var(--gradient-angle),
		rgba(144, 144, 144, 0) 0%,
		var(--tl-color-muted-2) 100%
	);
}

@media (hover: hover) {
	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
		opacity: 1;
		background: linear-gradient(
			var(--gradient-angle),
			rgba(144, 144, 144, 0) 0%,
			var(--tl-color-muted-2) 100%
		);
	}
}

/* Menu Sizes */

.tlui-menu[data-size='large'] > .tlui-menu__group {
	min-width: initial;
}

.tlui-menu[data-size='medium'] > .tlui-menu__group {
	min-width: 144px;
}

.tlui-menu[data-size='small'] > .tlui-menu__group {
	min-width: 96px;
}

.tlui-menu[data-size='tiny'] > .tlui-menu__group {
	min-width: 0px;
}

.tlui-menu-click-capture {
	position: fixed;
	inset: 0;
	z-index: var(--tl-layer-menu-click-capture);
}

/* --------------------- Popover -------------------- */

.tlui-popover {
	position: relative;
	display: flex;
	align-content: stretch;
}

.tlui-popover__content {
	position: relative;
	max-height: calc(var(--radix-popover-content-available-height) - 8px);
	margin: 0px;
	border: none;
	border-radius: var(--tl-radius-3);
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
	z-index: var(--tl-layer-menus);
	overflow: hidden;
	overflow-y: auto;
	touch-action: auto;
	overscroll-behavior: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* -------------------- Menu Zone ------------------- */

.tlui-menu-zone {
	position: relative;
	z-index: var(--tl-layer-panels);
	width: -moz-fit-content;
	width: fit-content;
	border-right: 2px solid var(--tl-color-background);
	border-bottom: 2px solid var(--tl-color-background);
	border-bottom-right-radius: var(--tl-radius-4);
	background-color: var(--tl-color-low);
}

.tlui-menu-zone *[data-state='open']::after {
	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

@media (hover: hover) {
	.tlui-menu-zone *[data-state='open']:not(:hover)::after {
		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}

/* ------------------- Page Select ------------------ */

.tlui-page-menu__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 260px;
	height: -moz-fit-content;
	height: fit-content;
	max-height: 50vh;
}

.tlui-page-menu__trigger {
	width: auto;
}

.tlui-page-menu__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 40px;
	padding-left: var(--tl-space-4);
	border-bottom: 1px solid var(--tl-color-divider);
}

.tlui-page-menu__header > .tlui-button:nth-of-type(1) {
	margin-right: -4px;
}

.tlui-page-menu__header__title {
	color: var(--tl-color-text);
	font-size: 12px;
	flex-grow: 2;
}

.tlui-page-menu__name {
	flex-grow: 2;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tlui-page-menu__list {
	position: relative;
	touch-action: auto;
	flex-direction: column;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	touch-action: auto;
}

.tlui-page-menu__item {
	position: relative;
}

.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button[data-state='open'] {
	opacity: 1;
}

@media (hover: hover) {
	.tlui-page-menu__item:hover > .tlui-page_menu__item__submenu > .tlui-button {
		opacity: 1;
	}
}

.tlui-page-menu__item:nth-of-type(n + 2) {
	margin-top: -4px;
}

.tlui-page-menu__item__button {
	width: 100%;
}

.tlui-page-menu__item__button:not(:only-child) {
	flex-grow: 2;
	margin-right: -2px;
}

.tlui-page-menu__item__button > span {
	display: block;
	flex-grow: 2;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tlui-page-menu__item__button > span {
	padding-right: calc(40px - 12px);
}

@media (hover: hover) {
	.tlui-page-menu__item__button > span {
		padding-right: 0px;
	}

	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > span {
		padding-right: calc(40px - 12px);
	}
}

.tlui-page-menu__item__button__checkbox {
	padding-left: 35px;
}

.tlui-page-menu__item__button__check {
	position: absolute;
	left: 0px;
	width: 24px;
	padding-left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tl-color-text);
}

.tlui-page_menu__item__sortable {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: -moz-fit-content;
	height: fit-content;
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	z-index: var(--tl-layer-above);
}

.tlui-page_menu__item__sortable__title {
	flex: 1;
}

.tlui-page_menu__item__sortable__title > .tlui-input__wrapper {
	height: 100%;
}

.tlui-page_menu__item__sortable:focus-visible {
	z-index: var(--tl-layer-focused-input);
}

.tlui-page_menu__item__sortable__handle {
	touch-action: none;
	width: 32px;
	min-width: 0px;
	height: 40px;
	cursor: grab;
	color: var(--tl-color-text-3);
	flex-shrink: 0;
	margin-right: -9px;
}

.tlui-page_menu__item__sortable__handle:active {
	cursor: grabbing;
}

.tlui-page-menu__item__input {
	margin-left: 12px;
	height: 100%;
}

/* The more menu has complex CSS here: */
/* If the user can hover, then visible but opacity zero until hover */
/* If the user cannot hover, then not displayed unless editing, and then opacity 1 */

.tlui-page_menu__item__submenu {
	pointer-events: all;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	cursor: pointer;
	margin: 0px;
	margin-left: -2px;
	z-index: 10;
}

.tlui-page_menu__item__submenu > .tlui-button {
	opacity: 0;
}

.tlui-page_menu__item__sortable:focus-visible > .tlui-page_menu__item__submenu > .tlui-button,
.tlui-page_menu__item__submenu[data-isediting='true'],
.tlui-page_menu__item__submenu > .tlui-button[data-state='open'],
.tlui-page_menu__item__submenu > .tlui-button:focus-visible {
	opacity: 1;
}

.tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

@media (hover: hover) {
	.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}

.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
	opacity: 1;
}

.tlui-button__icon {
	padding: 0px;
}

.tlui-page-menu__item__button .tlui-button__icon {
	margin-right: 4px;
}

@media (hover: hover) {
	.tlui-page_menu__item__submenu[data-isediting='true'] > .tlui-button {
		opacity: 0;
	}

	.tlui-page_menu__item__submenu:hover > .tlui-button {
		opacity: 1;
	}
}

/* -------------- Skip to main content -------------- */

.tl-skip-to-main-content {
	position: fixed;
	top: 48px;
	left: -9999px;
	padding: 8px 16px;
	z-index: var(--tl-layer-toasts);
}

.tl-skip-to-main-content:focus {
	left: 8px;
}

/* ---------------- Offline indicator --------------- */

.tlui-offline-indicator {
	display: flex;
	color: var(--tl-color-background);
	background-color: var(--tl-color-text);
	border: none;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 99px;
	cursor: default;
	opacity: 0;
	animation: tl-fade-in;
	animation-duration: 0.12s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

/* ------------------- Style panel ------------------ */

.tlui-style-panel__wrapper {
	box-shadow: var(--tl-shadow-2);
	border-radius: var(--tl-radius-3);
	pointer-events: all;
	background-color: var(--tl-color-panel);
	height: -moz-fit-content;
	height: fit-content;
	max-height: 100%;
	margin: 8px;
	margin-top: 4px;
	touch-action: auto;
	overscroll-behavior: none;
	overflow-y: auto;
	overflow-x: hidden;
	color: var(--tl-color-text);
}
/* if the style panel is the only child (ie no share menu), increase the margin */
.tlui-style-panel__wrapper:only-child {
	margin-top: 8px;
}

.tlui-style-panel {
	position: relative;
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	width: 148px;
	max-width: 148px;
}

.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-text);
	outline-offset: -5px;
}

.tlui-style-panel::-webkit-scrollbar {
	display: none;
}

.tlui-style-panel .tlui-button.select {
	width: 100%;
}

.tlui-style-panel__section {
	display: flex;
	position: relative;
	flex-direction: column;
}

/*
add a border to the bottom of all but the last section. we have to handle empty sections too, which
are hidden and shouldn't be counted
*/
.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
	border-bottom: 1px solid var(--tl-color-divider);
}
/*
if a section ends with a slider and we're adding a border, we need some extra space for visual
balance. we need to handle empty sections as above. is this the most complex css selector in all of
tldraw? probably.
*/
.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
	) {
	margin-bottom: 7px;
}

.tlui-style-panel__section:empty {
	display: none;
}

/*
 * This is used in a couple places, like Align and Vertical Align.
 * It's because we have a toolbar with a Toggle Group but then an adjacent button
 * next to it that opens a popup.
 */
.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
	flex-wrap: wrap;
}

.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
	margin-left: -2px;
}

.tlui-style-panel__section__common:not(:only-child) {
	margin-bottom: 7px;
	border-bottom: 1px solid var(--tl-color-divider);
}

.tlui-style-panel__dropdown-picker:only-child {
	flex: 1;
}

.tlui-style-panel__double-select-picker {
	display: flex;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text-1);
	font-size: 12px;
}

.tlui-style-panel__double-select-picker-label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	flex-grow: 2;
	max-width: 100%;
}

.tlui-style-panel .tlui-button[data-state='open']::after {
	opacity: 1;
	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
}

@media (hover: hover) {
	.tlui-style-panel .tlui-button[aria-expanded='true'] {
		background: none;
	}
	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
		opacity: 1;
		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	}
}

/* Accessibility subheadings */

.tlui-style-panel__section .tlui-style-panel__subheading,
.tlui-style-panel__section__common .tlui-style-panel__subheading,
.tlui-style-panel__subheading + .tlui-slider__container {
	margin: 0;
	padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);
	font-size: 12px;
	font-weight: inherit;
	line-height: inherit;
}

.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
	padding-top: var(--tl-space-3);
}

.tlui-style-panel__subheading + .tlui-slider__container {
	padding-top: 0px;
}

/* --------------------- Bottom --------------------- */

.tlui-layout__bottom {
	grid-row: 2;
	width: 100%;
}

.tlui-layout__bottom__main {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* ------------------- Navigation ------------------- */

.tlui-navigation-panel {
	display: flex;
	width: -moz-min-content;
	width: min-content;
	flex-direction: column;
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	position: absolute;
	left: 0px;
}

.tlui-navigation-panel::before {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	inset: -2px -2px 0px 0px;
	border-radius: 0;
	border-top: 2px solid var(--tl-color-background);
	border-right: 2px solid var(--tl-color-background);
	border-top-right-radius: var(--tl-radius-4);
	background-color: var(--tl-color-low);
}

.tlui-navigation-panel[data-a11y='true']::before {
	display: none;
}

/* Minimap */

.tlui-minimap {
	width: 100%;
	height: 96px;
	min-height: 96px;
	overflow: hidden;
	padding: var(--tl-space-3);
	padding-top: 0px;
}

.tlui-minimap__canvas {
	position: relative;
	width: 100%;
	height: 100%;
}

/* --------------------- Toolbar -------------------- */

/* Wide container */
.tlui-main-toolbar {
	grid-column: 1 / span 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 2;
}

.tlui-main-toolbar--horizontal {
	padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));
	max-width: 100%;
}

.tlui-main-toolbar--vertical {
	position: absolute;
	left: 0;
	top: 90px; /* height of page menu + 'back to content' button */
	bottom: 140px; /* height of expanded mini-map */
	padding-left: calc(var(--tl-space-3) + var(--tl-sab));
}

[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
	bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
}

/* Centered Content */
.tlui-main-toolbar__inner {
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	gap: var(--tl-space-3);
	align-items: flex-start;
}

.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
	flex-direction: column;
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
	width: -moz-fit-content;
	width: fit-content;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
	display: flex;
	height: -moz-fit-content;
	height: fit-content;
}

/* Row of controls + lock button */
.tlui-main-toolbar__extras {
	position: relative;
	z-index: var(--tl-layer-above);
	pointer-events: none;
	align-self: stretch;
}

.tlui-main-toolbar__extras:empty {
	display: none;
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
	height: 48px;
	top: 6px;
}

.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
	width: 48px;
	order: 1;
}

.tlui-main-toolbar__extras__controls {
	position: relative;
	z-index: var(--tl-layer-above);
	background-color: var(--tl-color-low);
	border: 2px solid var(--tl-color-background);
	pointer-events: all;
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
	border-top-left-radius: var(--tl-radius-4);
	border-top-right-radius: var(--tl-radius-4);
	margin-left: 8px;
	margin-right: 0px;
	width: -moz-fit-content;
	width: fit-content;
}

.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
	border-top-right-radius: var(--tl-radius-4);
	border-bottom-right-radius: var(--tl-radius-4);
	margin-top: 8px;
	margin-left: -2px;
	margin-bottom: 0px;
	width: -moz-fit-content;
	width: fit-content;
}

.tlui-main-toolbar__tools {
	border-radius: var(--tl-radius-4);
	z-index: var(--tl-layer-panels);
	pointer-events: all;
	position: relative;
	background: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-2);
	contain: layout style paint;
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
	align-self: flex-end;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
	align-self: flex-start;
}

.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
	width: 40px;
	margin-left: 2px;
}
.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
	height: 40px;
	margin-top: 2px;
}

.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
	width: 32px;
	padding: 0px;
}

.tlui-main-toolbar--horizontal *[data-state='open']::after {
	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}
.tlui-main-toolbar--vertical *[data-state='open']::after {
	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
	opacity: 1;
}

.tlui-main-toolbar__overflow-content {
	touch-action: none;
}

.tlui-main-toolbar__tools [data-toolbar-visible='false'],
.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
	display: none;
}

.tlui-main-toolbar__group:empty {
	display: none;
}
.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
	border-right: 1px solid var(--color-divider);
	margin-right: 2px;
}
.tlui-column.tlui-main-toolbar__group:not(
		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
	) {
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 2px;
}
.tlui-grid.tlui-main-toolbar__group {
	grid-column: 1 / span 4;
}
.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 2px;
}

@media (hover: hover) {
	.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
	.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
		opacity: 1;
	}
}

/* ------------------- Tooltip -------------------- */

.tlui-tooltip {
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 4px;
	background-color: var(--tl-color-tooltip);
	box-shadow: none;
	color: var(--tl-color-text-shadow);
	max-width: 400px;
	width: -moz-fit-content;
	width: fit-content;
	text-align: center;
	will-change: transform, opacity;
	z-index: 2;
}

.tlui-tooltip__arrow {
	fill: var(--tl-color-tooltip);
	will-change: opacity;
}

[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
	z-index: var(--tl-layer-toasts) !important;
	pointer-events: none;
}

/* ------------------- Debug panel ------------------ */

.tlui-debug-panel {
	background-color: var(--tl-color-low);
	width: 100%;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto auto auto;
	justify-content: space-between;
	padding-left: var(--tl-space-4);
	border-top: 1px solid var(--tl-color-background);
	font-size: 12px;
	color: var(--tl-color-text-1);
	z-index: var(--tl-layer-panels);
	pointer-events: all;
}

.tlui-debug-panel__current-state {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tlui-debug-panel__fps {
	margin-right: 8px;
}

.tlui-debug-panel__fps__slow {
	font-weight: bold;
	color: var(--tl-color-danger);
}

.tlui-a11y-audit {
	border-collapse: collapse;
}

.tlui-a11y-audit th,
.tlui-a11y-audit td {
	padding: 8px;
	border: 1px solid var(--tl-color-low-border);
}

/* --------------------- Toasts --------------------- */

.tlui-toast__viewport {
	position: absolute;
	inset: 0px;
	margin: 0px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex-direction: column;
	gap: var(--tl-space-3);
	pointer-events: none;
	padding: 0px var(--tl-space-3) 64px 0px;
	z-index: var(--tl-layer-toasts);
}

.tlui-toast__viewport > * {
	pointer-events: all;
}

.tlui-toast__icon {
	padding-top: 11px;
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text-1);
}

.tlui-toast__container {
	min-width: 200px;
	display: flex;
	flex-direction: row;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-2);
	border-radius: var(--tl-radius-3);
	font-size: 12px;
}

.tlui-toast__container[data-severity='success'] .tlui-icon {
	color: var(--tl-color-success);
}

.tlui-toast__container[data-severity='info'] .tlui-icon {
	color: var(--tl-color-info);
}

.tlui-toast__container[data-severity='warning'] .tlui-icon {
	color: var(--tl-color-warning);
}

.tlui-toast__container[data-severity='error'] .tlui-icon {
	color: var(--tl-color-danger);
}

.tlui-toast__main {
	flex-grow: 2;
	max-width: 280px;
}

.tlui-toast__content {
	padding: var(--tl-space-4);
	display: flex;
	line-height: 1.4;
	flex-direction: column;
	gap: var(--tl-space-3);
}

.tlui-toast__main[data-actions='true'] .tlui-toast__content {
	padding-bottom: var(--tl-space-2);
}

.tlui-toast__title {
	font-weight: bold;
	color: var(--tl-color-text-1);
	/* this makes the default toast look better */
	line-height: 16px;
}

.tlui-toast__description {
	color: var(--tl-color-text-1);
	padding: var(--tl-space-3);
	margin: 0px;
	padding: 0px;
}

.tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
	padding-left: 0px;
}

.tlui-toast__actions {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 0;
}

.tlui-toast__close {
	align-self: flex-end;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.tlui-toast__container[data-state='open'] {
		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
	}

	.tlui-toast__container[data-state='closed'] {
		animation: tlui-fade-out 100ms ease-in;
	}

	.tlui-toast__container[data-swipe='move'] {
		transform: translateX(var(--radix-toast-swipe-move-x));
	}

	.tlui-toast__container[data-swipe='cancel'] {
		transform: translateX(0);
		transition: transform 200ms ease-out;
	}

	.tlui-toast__container[data-swipe='end'] {
		animation: tlui-slide-out 100ms ease-out;
	}
}

/* ---------------- Dialog ---------------- */

.tlui-dialog__overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: var(--tl-layer-canvas-overlays);
	background-color: var(--tl-color-overlay);
	pointer-events: all;
	animation: tl-fade-in 0.12s ease-out;
	display: grid;
	place-items: center;
	overflow-y: auto;
	padding: 0px var(--tl-space-3);
}

.tlui-dialog__content {
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: default;
	background-color: var(--tl-color-panel);
	box-shadow: var(--tl-shadow-3);
	border-radius: var(--tl-radius-3);
	font-size: 12px;
	overflow: hidden;
	min-width: 300px;
	max-width: 100%;
	max-height: 80%;
}

.tlui-dialog__header {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0;
	z-index: var(--tl-layer-header-footer);
	padding-left: var(--tl-space-4);
	color: var(--tl-color-text);
	height: 40px;
}

.tlui-dialog__header__title {
	flex: 1;
	font-weight: inherit;
	font-size: 12px;
	margin: 0px;
	color: var(--tl-color-text-1);
}

.tlui-dialog__header__close {
	justify-self: flex-end;
}

.tlui-dialog__body {
	padding: var(--tl-space-4) var(--tl-space-4);
	flex: 0 1;
	overflow-y: auto;
	overflow-x: hidden;
	color: var(--tl-color-text-1);
	-moz-user-select: all;
	     user-select: all;
	-webkit-user-select: text;
}
.tlui-dialog__body a {
	color: var(--tl-color-selected);
}

.tlui-dialog__body ul,
.tlui-dialog__body ol {
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-2);
}

.tlui-dialog__footer {
	position: relative;
	min-height: 12px;
	z-index: var(--tl-layer-header-footer);
}

.tlui-dialog__footer__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {
	margin-right: -4px;
}

/* --------------------- Dialogs -------------------- */

/* Edit Link Dialog */

.tlui-edit-link-dialog {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-4);
	color: var(--tl-color-text);
}

.tlui-edit-link-dialog__input {
	background-color: var(--tl-color-muted-2);
	flex-grow: 2;
	border-radius: var(--tl-radius-2);
	padding: 0px var(--tl-space-4);
}

/* Embed Dialog */

.tlui-embed__spacer {
	flex-grow: 2;
	min-height: 0px;
	margin-left: calc(-1 * var(--tl-space-4));
	margin-top: calc(-1 * var(--tl-space-4));
	pointer-events: none;
}

.tlui-embed-dialog__list {
	display: flex;
	flex-direction: column;
	padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);
}

.tlui-embed-dialog__item__image {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--tl-color-selected-contrast);
	border-radius: var(--tl-radius-1);
}

.tlui-embed-dialog__enter {
	display: flex;
	flex-direction: column;
	gap: var(--tl-space-4);
	color: var(--tl-color-text-1);
}

.tlui-embed-dialog__input {
	background-color: var(--tl-color-muted-2);
	flex-grow: 2;
	border-radius: var(--tl-radius-2);
	padding: 0px var(--tl-space-4);
}

.tlui-embed-dialog__warning {
	color: var(--tl-color-danger);
	text-shadow: none;
}

.tlui-embed-dialog__instruction__link {
	display: flex;
	gap: var(--tl-space-1);
	margin-top: var(--tl-space-4);
}

.tlui-embed-dialog__enter a {
	color: var(--tl-color-text-1);
}

/* --------------- Keyboard shortcuts --------------- */

.tlui-shortcuts-dialog__header {
	border-bottom: 1px solid var(--tl-color-divider);
}

.tlui-shortcuts-dialog__body {
	position: relative;
	-moz-columns: 3;
	     columns: 3;
	-moz-column-gap: var(--tl-space-9);
	     column-gap: var(--tl-space-9);
	pointer-events: all;
	touch-action: auto;

	/* Terrible fix to allow firefox users to scroll the dialog */
	overflow-x: auto;
}

.tlui-shortcuts-dialog__body__tablet {
	-moz-columns: 2;
	     columns: 2;
}

.tlui-shortcuts-dialog__body__mobile {
	-moz-columns: 1;
	     columns: 1;
}

.tlui-shortcuts-dialog__group {
	-moz-column-break-inside: avoid;
	     break-inside: avoid-column;
	padding-bottom: var(--tl-space-6);
}

.tlui-shortcuts-dialog__group__title {
	font-size: inherit;
	font-weight: inherit;
	margin: 0px;
	color: var(--tl-color-text-3);
	height: 32px;
	display: flex;
	align-items: center;
}

.tlui-shortcuts-dialog__group__content {
	display: flex;
	flex-direction: column;
	color: var(--tl-color-text-1);
}

.tlui-shortcuts-dialog__key-pair {
	display: flex;
	gap: var(--tl-space-4);
	align-items: center;
	justify-content: space-between;
	height: 32px;
}

.tlui-shortcuts-dialog__key-pair__key {
	flex: 1;
	font-size: 12px;
}

/* ------------------ Language menu ----------------- */

.tlui-language-menu {
	max-height: 500px;
}

.tlui-language-menu::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 24px;
	background: linear-gradient(
		to bottom,
		var(--tl-color-panel-transparent) 0%,
		var(--tl-color-panel) 90%,
		var(--tl-color-panel) 100%
	);
	border-bottom-left-radius: var(--tl-radius-3);
	border-bottom-right-radius: var(--tl-radius-3);
	pointer-events: none;
}

/* ------------------ Actions menu ------------------ */

.tlui-actions-menu {
	max-height: calc(100vh - 150px);
}

/* -------------------- Help menu ------------------- */

.tlui-help-menu {
	pointer-events: all;
	position: absolute;
	bottom: var(--tl-space-2);
	right: var(--tl-space-2);
	z-index: var(--tl-layer-panels);
	border: 2px solid var(--tl-color-background);
	border-radius: 100%;
}

/* ------------------- Da share zone ------------------ */

.tlui-share-zone {
	padding: 0px 0px 0px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	z-index: var(--tl-layer-panels);
	align-items: center;
	padding-top: 2px;
	padding-right: 4px;
}

/* ------------------- People Menu ------------------- */

.tlui-people-menu__avatars-button {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: none;
	border: none;
	cursor: pointer;
	pointer-events: all;
	border-radius: var(--tl-radius-1);
	padding-right: 1px;
	height: 100%;
}

.tlui-people-menu__avatars {
	display: flex;
	flex-direction: row;
}

.tlui-people-menu__avatar {
	height: 24px;
	width: 24px;
	border: 2px solid var(--tl-color-background);
	background-color: var(--tl-color-low);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	color: var(--tl-color-selected-contrast);
	z-index: 2;
}

.tlui-people-menu__avatar:nth-of-type(n + 2) {
	margin-left: -12px;
}

.tlui-people-menu__avatars-button[data-state='open'] {
	opacity: 1;
}

@media (hover: hover) {
	.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {
		border-color: var(--tl-color-low);
	}
}

.tlui-people-menu__more {
	min-width: 0px;
	font-size: 11px;
	font-weight: 600;
	color: var(--tl-color-text-1);
	font-family: inherit;
	padding: 0px 4px;
}
.tlui-people-menu__more::after {
	border-radius: var(--tl-radius-2);
	inset: 0px;
}

.tlui-people-menu__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 220px;
	height: -moz-fit-content;
	height: fit-content;
	max-height: 50vh;
}

.tlui-people-menu__section {
	position: relative;
	touch-action: auto;
	flex-direction: column;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	touch-action: auto;
}

.tlui-people-menu__section:first-child,
.tlui-people-menu__section:last-child {
	flex-shrink: 0;
}

.tlui-people-menu__section:not(:last-child) {
	border-bottom: 1px solid var(--tl-color-divider);
}

.tlui-people-menu__user {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.tlui-people-menu__user__color {
	flex-shrink: 0;
}

.tlui-people-menu__user__name {
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--tl-color-text-1);
	max-width: 100%;
	flex-grow: 1;
	flex-shrink: 100;
}

.tlui-people-menu__user__label {
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--tl-color-text-3);
	flex-grow: 100;
	flex-shrink: 0;
	margin-left: 4px;
}

.tlui-people-menu__user__input {
	flex-grow: 2;
	height: 100%;
	padding: 0px;
	margin: 0px;
}

.tlui-people-menu__user > .tlui-input__wrapper {
	width: auto;
	display: flex;
	align-items: auto;
	flex-grow: 2;
	gap: 8px;
	height: 100%;
	padding: 0px;
}

.tlui-people-menu__item {
	position: relative;
}

.tlui-people-menu__item:last-of-type .tlui-button__menu {
	margin-bottom: 0;
}

.tlui-people-menu__item__button {
	padding: 0 11px;
	overflow: hidden;
}

.tlui-people-menu__item > .tlui-button__menu {
	width: auto;
	display: flex;
	align-items: auto;
	justify-content: flex-start;
	flex-grow: 2;
	gap: 11px;
}

.tlui-people-menu__name {
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlui-people-menu__item__follow {
	position: absolute;
	top: 0px;
	right: 0px;
	max-width: 40px;
	flex-shrink: 0;
}

.tlui-people-menu__item[data-follow='true'],
.tlui-people-menu__item:has(.tlui-button:focus-visible) {
	padding-right: 36px;
}

.tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
.tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
	opacity: 1;
}

@media (hover: hover) {
	.tlui-people-menu__item__follow {
		opacity: 0;
	}

	.tlui-people-menu__item:hover {
		padding-right: 36px;
	}
	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {
		opacity: 1;
	}
}

/* --------------- Following indicator -------------- */

.tlui-following-indicator {
	display: block;
	position: absolute;
	inset: 0px;
	border-width: 2px;
	border-style: solid;
	z-index: var(--tl-layer-following-indicator);
	pointer-events: none;
}

/* --------------- Contextual toolbar --------------- */

.tlui-contextual-toolbar {
	position: absolute;
}

/**
 * N.B. We hide the toolbar while mousing down, so no need to turn these off.
 */
.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
	pointer-events: all;
}

.tlui-contextual-toolbar [data-isactive='true']::after {
	background-color: var(--tl-color-muted-2);
	opacity: 1;
}

.tlui-contextual-toolbar {
	opacity: 0;
	transition: opacity 0.08s ease-in-out;
}

.tlui-contextual-toolbar,
.tlui-contextual-toolbar * {
	pointer-events: none;
}

.tlui-contextual-toolbar[data-visible='true'] {
	opacity: 1;
	z-index: var(--tl-layer-menus);
}

.tlui-contextual-toolbar[data-interactive='true'],
.tlui-contextual-toolbar[data-interactive='true'] * {
	pointer-events: all;
}

.tlui-rich-text__toolbar-link-input {
	margin-left: 12px;
	/*
	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
	 * This is so the toolbar size stays stable going in and out of the link editor.
	 */
	width: 148px;
}

.tlui-media__toolbar-alt-text-input {
	margin-left: 12px;
	/*
	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.
	 * This is so the toolbar size stays stable going in and out of the alt text editor.
	 */
	min-width: 200px;
}

.tlui-contextual-toolbar .tlui-input__wrapper {
	height: 40px;
}

.tlui-image__toolbar .tlui-slider__container {
	width: 125px;
}

.tlui-image__toolbar .tlui-slider {
	height: 100%;
}

.tlui-image__toolbar .tlui-slider__track {
	height: 32px;
}

.tlui-image__toolbar .tlui-slider__thumb {
	width: 14px;
	height: 14px;
}

/* ------------------- Animations ------------------- */
@keyframes tlui-fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes tlui-slide-in {
	from {
		transform: translateX(calc(100% + var(--tl-space-3)));
	}
	to {
		transform: translateX(0px);
	}
}

@keyframes tlui-slide-out {
	from {
		transform: translateX(var(--radix-toast-swipe-end-x));
	}
	to {
		transform: translateX(calc(100% + var(--tl-space-3)));
	}
}

