@font-face { font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; font-named-instance: "Regular"; src: url("chrome-extension://infppggnoaenmfagbfknfkancpbljcca/Inter-roman-latin.var.woff2") format("woff2") }
.automa-element-selector { direction: ltr } 
 [automa-isDragging] { user-select: none } 
 [automa-el-list] {outline: 2px dashed #6366f1;}@charset "UTF-8";

/* components/Spinner.scss */
.excalidraw .Spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  --spinner-color: var(--icon-fill-color);
}
.excalidraw .Spinner svg {
  animation: rotate 1.6s linear infinite;
  animation-delay: var(--spinner-delay);
  transform-origin: center center;
}
.excalidraw .Spinner circle {
  stroke: var(--spinner-color);
  animation: dash 1.6s linear 0s infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 300;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 150, 300;
    stroke-dashoffset: -200;
  }
  100% {
    stroke-dasharray: 1, 300;
    stroke-dashoffset: -280;
  }
}

/* components/ToolIcon.scss */
.excalidraw .ToolIcon {
  border-radius: var(--border-radius-lg);
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .ToolIcon__hidden {
  display: none !important;
}
.excalidraw .ToolIcon.fillable .ToolIcon_type_radio:checked + .ToolIcon__icon,
.excalidraw .ToolIcon.fillable .ToolIcon_type_checkbox:checked + .ToolIcon__icon {
  --icon-fill-color: var(--color-on-primary-container);
}
.excalidraw .ToolIcon.fillable .ToolIcon_type_radio:checked + .ToolIcon__icon svg,
.excalidraw .ToolIcon.fillable .ToolIcon_type_checkbox:checked + .ToolIcon__icon svg {
  fill: var(--icon-fill-color);
}
.excalidraw .ToolIcon .ToolIcon_type_radio:checked + .ToolIcon__icon,
.excalidraw .ToolIcon .ToolIcon_type_checkbox:checked + .ToolIcon__icon {
  background: var(--color-surface-primary-container);
  --keybinding-color: var(--color-on-primary-container);
}
.excalidraw .ToolIcon .ToolIcon_type_radio:checked + .ToolIcon__icon svg,
.excalidraw .ToolIcon .ToolIcon_type_checkbox:checked + .ToolIcon__icon svg {
  color: var(--color-on-primary-container);
}
.excalidraw .ToolIcon .ToolIcon__keybinding {
  bottom: 4px;
  right: 4px;
}
.excalidraw .ToolIcon .ToolIcon__icon:hover {
  background: var(--button-hover-bg);
}
.excalidraw .ToolIcon .ToolIcon__icon:active {
  background: var(--button-hover-bg);
  border: 1px solid var(--button-active-border);
}
.excalidraw .ToolIcon .ToolIcon__icon:active svg {
  color: var(--color-on-primary-container);
}
.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true] {
  background: initial;
  border: none;
}
.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true] svg {
  color: var(--color-disabled);
}
.excalidraw .ToolIcon--plain {
  background-color: transparent;
}
.excalidraw .ToolIcon--plain .ToolIcon__icon {
  width: 2rem;
  height: 2rem;
}
.excalidraw .ToolIcon_type_radio,
.excalidraw .ToolIcon_type_checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.excalidraw .ToolIcon__icon {
  box-sizing: border-box;
  width: var(--default-button-size);
  height: var(--default-button-size);
  color: var(--icon-fill-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-lg);
}
.excalidraw .ToolIcon__icon + .ToolIcon__label {
  margin-inline-start: 0;
}
.excalidraw .ToolIcon__icon svg {
  position: relative;
  width: var(--default-icon-size);
  height: var(--default-icon-size);
  color: var(--icon-fill-color);
}
.excalidraw .ToolIcon__label {
  display: flex;
  align-items: center;
  color: var(--icon-fill-color);
  font-family: var(--ui-font);
  margin: 0 0.8em;
  text-overflow: ellipsis;
}
.excalidraw .ToolIcon__label .Spinner {
  margin-left: 0.6em;
}
.excalidraw .ToolIcon_size_small .ToolIcon__icon {
  width: 2rem;
  height: 2rem;
  font-size: 0.8em;
}
.excalidraw .ToolIcon_type_button,
.excalidraw .Modal .ToolIcon_type_button {
  padding: 0;
  border: none;
  margin: 0;
  font-size: inherit;
  background-color: initial;
}
.excalidraw .ToolIcon_type_button:focus-visible,
.excalidraw .Modal .ToolIcon_type_button:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
.excalidraw .ToolIcon_type_button.ToolIcon--selected,
.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected {
  background-color: var(--button-gray-2);
}
.excalidraw .ToolIcon_type_button.ToolIcon--selected:active,
.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected:active {
  background-color: var(--button-gray-3);
}
.excalidraw .ToolIcon_type_button:active,
.excalidraw .Modal .ToolIcon_type_button:active {
  background-color: var(--button-gray-3);
}
.excalidraw .ToolIcon_type_button:disabled,
.excalidraw .Modal .ToolIcon_type_button:disabled {
  cursor: default;
}
.excalidraw .ToolIcon_type_button:disabled:active,
.excalidraw .ToolIcon_type_button:disabled:focus-visible,
.excalidraw .ToolIcon_type_button:disabled:hover,
.excalidraw .Modal .ToolIcon_type_button:disabled:active,
.excalidraw .Modal .ToolIcon_type_button:disabled:focus-visible,
.excalidraw .Modal .ToolIcon_type_button:disabled:hover {
  background-color: initial;
  border: none;
  box-shadow: none;
}
.excalidraw .ToolIcon_type_button:disabled svg,
.excalidraw .Modal .ToolIcon_type_button:disabled svg {
  color: var(--color-disabled);
}
.excalidraw .ToolIcon_type_button--show,
.excalidraw .Modal .ToolIcon_type_button--show {
  visibility: visible;
}
.excalidraw .ToolIcon_type_button--hide,
.excalidraw .Modal .ToolIcon_type_button--hide {
  display: none !important;
}
.excalidraw .ToolIcon_type_floating {
  background-color: transparent;
}
.excalidraw .ToolIcon_type_floating:hover {
  background-color: transparent;
}
.excalidraw .ToolIcon_type_floating:active {
  background-color: transparent;
}
.excalidraw .ToolIcon_type_floating .ToolIcon__icon {
  background-color: var(--button-gray-1);
  width: 2rem;
  height: 2rem;
}
.excalidraw .ToolIcon_type_floating .ToolIcon__icon:hover {
  background-color: var(--button-gray-2);
}
.excalidraw .ToolIcon_type_floating .ToolIcon__icon:active {
  background-color: var(--button-gray-3);
}
.excalidraw .ToolIcon__keybinding {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.625rem;
  color: var(--keybinding-color);
  font-family: var(--ui-font);
  -webkit-user-select: none;
          user-select: none;
}
:root[dir=ltr] .excalidraw .unlocked-icon {
  left: 2px;
}
:root[dir=rtl] .excalidraw .unlocked-icon {
  right: 2px;
}
.excalidraw .App-toolbar-container .ToolIcon__icon {
  width: var(--lg-button-size);
  height: var(--lg-button-size);
}
@media screen and (max-width: 450px) {
  .excalidraw .App-toolbar-container .ToolIcon__icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}
@media screen and (max-width: 379px) {
  .excalidraw .App-toolbar-container .ToolIcon__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.excalidraw .App-toolbar-container .ToolIcon__icon svg {
  width: var(--lg-icon-size);
  height: var(--lg-icon-size);
}
.excalidraw .App-toolbar-container .ToolIcon__LaserPointer .ToolIcon__icon,
.excalidraw .App-toolbar-container .ToolIcon__MagicButton .ToolIcon__icon {
  width: var(--default-button-size);
  height: var(--default-button-size);
}

/* components/ButtonIcon.scss */
.excalidraw {
  --theme-filter: none;
  --button-destructive-bg-color: #ffe3e3;
  --button-destructive-color: #c92a2a;
  --button-gray-1: #e9ecef;
  --button-gray-2: #ced4da;
  --button-gray-3: #adb5bd;
  --button-special-active-bg-color: #ebfbee;
  --dialog-border-color: var(--color-gray-20);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #a5d8ff;
  --icon-fill-color: var(--color-on-surface);
  --icon-green-fill-color: #2b8a3e;
  --default-bg-color: #ffffff;
  --input-bg-color: #ffffff;
  --input-border-color: #ced4da;
  --input-hover-bg-color: #f1f3f5;
  --input-label-color: #495057;
  --island-bg-color: #ffffff;
  --keybinding-color: var(--color-gray-40);
  --link-color: #1c7ed6;
  --overlay-bg-color: rgba(255, 255, 255, 0.88);
  --popup-bg-color: var(--island-bg-color);
  --popup-secondary-bg-color: #f1f3f5;
  --popup-text-color: #000000;
  --popup-text-inverted-color: #ffffff;
  --select-highlight-color: #339af0;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
  --default-border-color: var(--color-surface-high);
  --default-button-size: 2rem;
  --default-icon-size: 1rem;
  --lg-button-size: 2.25rem;
  --lg-icon-size: 1rem;
  --editor-container-padding: 1rem;
  --scrollbar-thumb: var(--button-gray-2);
  --scrollbar-thumb-hover: var(--button-gray-3);
  --color-slider-track: hsl(240, 100%, 90%);
  --color-slider-thumb: var(--color-gray-80);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-20);
  --sidebar-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --sidebar-border-color: var(--color-surface-high);
  --sidebar-bg-color: var(--island-bg-color);
  --library-dropdown-shadow:
    0px 15px 6px rgba(0, 0, 0, 0.01),
    0px 8px 5px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.09),
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1);
  --space-factor: 0.25rem;
  --text-primary-color: var(--color-on-surface);
  --color-selection: #6965db;
  --color-icon-white: #ffffff;
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-light-darker: #d7d5ff;
  --color-primary-hover: #5753d0;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;
  --color-gray-85: #242424;
  --color-gray-90: #1e1e1e;
  --color-gray-100: #121212;
  --color-disabled: var(--color-gray-40);
  --color-warning: #fceeca;
  --color-warning-dark: #f5c354;
  --color-warning-darker: #f3ab2c;
  --color-warning-darkest: #ec8b14;
  --color-text-warning: var(--text-primary-color);
  --color-danger: #db6965;
  --color-danger-dark: #db6965;
  --color-danger-darker: #d65550;
  --color-danger-darkest: #d1413c;
  --color-danger-text: black;
  --color-danger-background: #fff0f0;
  --color-danger-icon-background: #ffdad6;
  --color-danger-color: #700000;
  --color-danger-icon-color: #700000;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--text-primary-color);
  --color-warning-icon-color: var(--text-primary-color);
  --color-muted: var(--color-gray-30);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-100);
  --color-muted-background: var(--color-gray-80);
  --color-muted-background-darker: var(--color-gray-100);
  --color-promo: var(--color-primary);
  --color-success: #cafccc;
  --color-success-darker: #bafabc;
  --color-success-darkest: #a5eba8;
  --color-success-text: #268029;
  --color-success-contrast: #65bb6a;
  --color-success-contrast-hover: #6bcf70;
  --color-success-contrast-active: #6edf74;
  --color-logo-icon: var(--color-primary);
  --color-logo-text: #190064;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --color-surface-high: #f1f0ff;
  --color-surface-mid: #f2f2f7;
  --color-surface-low: #ececf4;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1b1b1f;
  --color-brand-hover: #5753d0;
  --color-on-primary-container: #030064;
  --color-brand-active: #4440bf;
  --color-border-outline: #767680;
  --color-border-outline-variant: #c5c5d0;
  --color-surface-primary-container: #e0dfff;
  --color-badge: #0b6513;
  --background-color-badge: #d3ffd2;
}
@media screen and (min-device-width: 1921px) {
  .excalidraw {
    --lg-button-size: 2.5rem;
    --lg-icon-size: 1.25rem;
    --default-button-size: 2.25rem;
    --default-icon-size: 1.25rem;
  }
}
.excalidraw.theme--dark.theme--dark-background-none {
  background: none;
}
.excalidraw.theme--dark {
  --theme-filter: invert(93%) hue-rotate(180deg);
  --button-destructive-bg-color: #5a0000;
  --button-destructive-color: #ffa8a8;
  --button-gray-1: #363636;
  --button-gray-2: #272727;
  --button-gray-3: #222;
  --button-special-active-bg-color: #204624;
  --dialog-border-color: var(--color-gray-80);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #228be6;
  --icon-green-fill-color: #69db7c;
  --default-bg-color: #121212;
  --input-bg-color: #121212;
  --input-border-color: #2e2e2e;
  --input-hover-bg-color: #181818;
  --input-label-color: #e9ecef;
  --island-bg-color: #232329;
  --keybinding-color: var(--color-gray-60);
  --link-color: #4dabf7;
  --overlay-bg-color: rgba(52, 58, 64, 0.12);
  --popup-secondary-bg-color: #222;
  --popup-text-color: #ced4da;
  --popup-text-inverted-color: #2c2c2c;
  --select-highlight-color: #4dabf7;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-85);
  --scrollbar-thumb: #343a40;
  --scrollbar-thumb-hover: #495057;
  --color-slider-track: hsl(244, 23%, 39%);
  --color-selection: #3530c4;
  --color-icon-white: var(--color-gray-90);
  --color-primary: #a8a5ff;
  --color-primary-darker: #b2aeff;
  --color-primary-darkest: #beb9ff;
  --color-primary-light: #4f4d6f;
  --color-primary-light-darker: #43415e;
  --color-primary-hover: #bbb8ff;
  --color-disabled: var(--color-gray-70);
  --color-text-warning: var(--color-gray-80);
  --color-danger: #ffa8a5;
  --color-danger-dark: #672120;
  --color-danger-darker: #8f2625;
  --color-danger-darkest: #ac2b29;
  --color-danger-text: #fbcbcc;
  --color-danger-background: #fbcbcc;
  --color-danger-icon-background: #672120;
  --color-danger-color: #261919;
  --color-danger-icon-color: #fbcbcc;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--color-gray-80);
  --color-warning-icon-color: var(--color-gray-80);
  --color-muted: var(--color-gray-80);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-20);
  --color-muted-background: var(--color-gray-40);
  --color-muted-background-darker: var(--color-gray-20);
  --color-logo-text: #e2dfff;
  --color-surface-high: hsl(245, 10%, 21%);
  --color-surface-low: hsl(240, 8%, 15%);
  --color-surface-mid: hsl(240 6% 10%);
  --color-surface-lowest: hsl(0, 0%, 7%);
  --color-on-surface: #e3e3e8;
  --color-brand-hover: #bbb8ff;
  --color-on-primary-container: #e0dfff;
  --color-brand-active: #d0ccff;
  --color-border-outline: #8e8d9c;
  --color-border-outline-variant: #46464f;
  --color-surface-primary-container: #403e6a;
}
.excalidraw button.standalone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  padding: 0;
}
.excalidraw button.standalone svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw button.standalone:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw button.standalone:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw button.standalone.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw button.standalone.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw button.standalone.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw button.standalone svg {
  width: var(--default-icon-size);
  height: var(--default-icon-size);
}
.excalidraw button.standalone > * {
  pointer-events: none;
}

/* components/EyeDropper.scss */
.excalidraw .excalidraw-eye-dropper-container,
.excalidraw .excalidraw-eye-dropper-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--zIndex-eyeDropperBackdrop);
  touch-action: none;
}
.excalidraw .excalidraw-eye-dropper-container {
  pointer-events: none;
}
.excalidraw .excalidraw-eye-dropper-backdrop {
  pointer-events: all;
}
.excalidraw .excalidraw-eye-dropper-preview {
  pointer-events: none;
  width: 3rem;
  height: 3rem;
  position: fixed;
  z-index: var(--zIndex-eyeDropperPreview);
  border-radius: 1rem;
  border: 1px solid var(--default-border-color);
  filter: var(--theme-filter);
}
.excalidraw .excalidraw-eye-dropper-trigger {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  padding: 4px;
  margin-right: -4px;
  margin-left: -2px;
  border-radius: 0.5rem;
  color: var(--icon-fill-color);
}
.excalidraw .excalidraw-eye-dropper-trigger:hover {
  background: var(--button-hover-bg);
}
.excalidraw .excalidraw-eye-dropper-trigger.selected {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* components/Island.scss */
.excalidraw .Island {
  --padding: 0;
  box-sizing: border-box;
  background-color: var(--island-bg-color);
  box-shadow: var(--shadow-island);
  border-radius: var(--border-radius-lg);
  padding: calc(var(--padding) * var(--space-factor));
  position: relative;
  transition: box-shadow 0.5s ease-in-out;
}
.excalidraw .Island.zen-mode {
  box-shadow: none;
}

/* components/ColorPicker/ColorPicker.scss */
.excalidraw .focus-visible-none:focus-visible {
  outline: none !important;
}
.excalidraw .color-picker__heading {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  text-align: left;
}
.excalidraw .color-picker-container {
  display: grid;
  grid-template-columns: 1fr 20px 1.625rem;
  padding: 0.25rem 0px;
  align-items: center;
}
.excalidraw--mobile.excalidraw .color-picker-container {
  max-width: 11rem;
}
.excalidraw .color-picker__top-picks {
  display: flex;
  justify-content: space-between;
}
.excalidraw .color-picker__button {
  --radius: 0.25rem;
  padding: 0;
  margin: 0;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--color-gray-30);
  border-radius: var(--radius);
  filter: var(--theme-filter);
  background-color: var(--swatch-color);
  background-position: left center;
  position: relative;
  font-family: inherit;
  box-sizing: border-box;
}
.excalidraw .color-picker__button:hover::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  box-shadow: 0 0 0 1px var(--color-gray-30);
  border-radius: calc(var(--radius) + 1px);
  filter: var(--theme-filter);
}
.excalidraw .color-picker__button.active .color-picker__button-outline {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  box-shadow: 0 0 0 1px var(--color-primary-darkest);
  z-index: 1;
  border-radius: calc(var(--radius) + 1px);
  filter: var(--theme-filter);
}
.excalidraw .color-picker__button:focus-visible {
  outline: none;
}
.excalidraw .color-picker__button:focus-visible::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 3px solid var(--focus-highlight-color);
  border-radius: calc(var(--radius) + 1px);
}
.excalidraw .color-picker__button:focus-visible.active .color-picker__button-outline {
  display: none;
}
.excalidraw .color-picker__button--large {
  --radius: 0.5rem;
  width: 1.875rem;
  height: 1.875rem;
}
.excalidraw .color-picker__button.is-transparent {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
}
.excalidraw .color-picker__button--no-focus-visible {
  border: 0;
}
.excalidraw .color-picker__button--no-focus-visible::after {
  display: none;
}
.excalidraw .color-picker__button--no-focus-visible:focus-visible {
  outline: none !important;
}
.excalidraw .color-picker__button.active-color {
  border-radius: calc(var(--radius) + 1px);
  width: 1.625rem;
  height: 1.625rem;
}
.excalidraw .color-picker__button__hotkey-label {
  position: absolute;
  right: 4px;
  bottom: 4px;
  filter: none;
  font-size: 11px;
}
.excalidraw .color-picker {
  background: var(--popup-bg-color);
  border: 0 solid rgba(255, 255, 255, 0.25);
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 4px;
  border-radius: 4px;
  position: absolute;
}
:root[dir=ltr] .excalidraw .color-picker {
  left: -5.5px;
}
:root[dir=rtl] .excalidraw .color-picker {
  right: -5.5px;
}
.excalidraw .color-picker-control-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
}
.excalidraw .color-picker-control-container + .popover {
  position: static;
}
.excalidraw .color-picker-popover-container {
  margin-top: -0.25rem;
}
:root[dir=ltr] .excalidraw .color-picker-popover-container {
  margin-left: 0.5rem;
}
:root[dir=rtl] .excalidraw .color-picker-popover-container {
  margin-left: -3rem;
}
.excalidraw .color-picker-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9px 10px;
  border-color: transparent transparent var(--popup-bg-color);
  position: absolute;
  top: 10px;
}
:root[dir=ltr] .excalidraw .color-picker-triangle {
  transform: rotate(270deg);
  left: -14px;
}
:root[dir=rtl] .excalidraw .color-picker-triangle {
  transform: rotate(90deg);
  right: -14px;
}
.excalidraw .color-picker-triangle-shadow {
  border-color: transparent transparent rgba(0, 0, 0, 0.1);
}
:root[dir=ltr] .excalidraw .color-picker-triangle-shadow {
  left: -14px;
}
:root[dir=rtl] .excalidraw .color-picker-triangle-shadow {
  right: -16px;
}
.excalidraw .color-picker-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  outline: none;
}
.excalidraw .color-picker-content--default {
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1.875rem);
  grid-gap: 0.25rem;
  border-radius: 4px;
}
.excalidraw .color-picker-content--default:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
.excalidraw .color-picker-content--canvas {
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
}
.excalidraw .color-picker-content--canvas-title {
  color: #868e96;
  font-size: 12px;
  padding: 0 0.25rem;
}
.excalidraw .color-picker-content--canvas-colors {
  padding: 0.5rem 0;
}
.excalidraw .color-picker-content--canvas-colors .color-picker-swatch {
  margin: 0 0.25rem;
}
.excalidraw .color-picker-content .color-input-container {
  grid-column: 1/span 5;
}
.excalidraw .color-picker-swatch {
  position: relative;
  height: 1.875rem;
  width: 1.875rem;
  cursor: pointer;
  border-radius: 4px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background-color: currentColor !important;
  filter: var(--theme-filter);
}
.excalidraw .color-picker-swatch:focus {
  box-shadow: 0 0 4px 1px currentColor;
  border-color: var(--select-highlight-color);
}
.excalidraw .color-picker-transparent {
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px inset;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.excalidraw .color-picker-transparent,
.excalidraw .color-picker-label-swatch {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
}
.excalidraw .color-picker-hash {
  height: var(--default-button-size);
  flex-shrink: 0;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: 1px solid var(--default-border-color);
  border-right: 0;
  box-sizing: border-box;
  color: var(--input-label-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
:root[dir=ltr] .excalidraw .color-picker-hash {
  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
}
:root[dir=rtl] .excalidraw .color-picker-hash {
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
  border-right: 1px solid var(--default-border-color);
  border-left: 0;
}
.excalidraw .color-input-container {
  display: flex;
}
.excalidraw .color-input-container:focus-within {
  box-shadow: 0 0 0 1px var(--color-primary-darkest);
  border-radius: var(--border-radius-lg);
}
.excalidraw .color-picker__input-label {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--default-border-color);
  border-radius: 8px;
  padding: 0 12px;
  margin: 8px;
  box-sizing: border-box;
}
.excalidraw .color-picker__input-label:focus-within {
  box-shadow: 0 0 0 1px var(--color-primary-darkest);
  border-radius: var(--border-radius-lg);
}
.excalidraw .color-picker__input-hash {
  padding: 0 0.25rem;
}
.excalidraw .color-picker-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  font-size: 0.875rem;
  font-family: inherit;
  background-color: transparent;
  color: var(--text-primary-color);
  border: 0;
  outline: none;
  height: var(--default-button-size);
  border: 1px solid var(--default-border-color);
  border-left: 0;
  letter-spacing: 0.4px;
  padding: 0.5rem;
  padding-left: 0.25rem;
  appearance: none;
}
:root[dir=ltr] .excalidraw .color-picker-input {
  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
:root[dir=rtl] .excalidraw .color-picker-input {
  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
  border-left: 1px solid var(--default-border-color);
  border-right: 0;
}
.excalidraw .color-picker-input:focus-visible {
  box-shadow: none;
}
.excalidraw .color-picker-label-swatch-container {
  border: 1px solid var(--default-border-color);
  border-radius: var(--border-radius-lg);
  width: var(--default-button-size);
  height: var(--default-button-size);
  box-sizing: border-box;
  overflow: hidden;
}
.excalidraw .color-picker-label-swatch {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  background-color: var(--swatch-color) !important;
  overflow: hidden;
  position: relative;
  filter: var(--theme-filter);
  border: 0 !important;
}
.excalidraw .color-picker-label-swatch svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .color-picker-label-swatch:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .color-picker-label-swatch:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .color-picker-label-swatch.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .color-picker-label-swatch.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .color-picker-label-swatch.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw .color-picker-label-swatch:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--swatch-color);
}
.excalidraw .color-picker-keybinding {
  position: absolute;
  bottom: 2px;
  font-size: 0.7em;
}
:root[dir=ltr] .excalidraw .color-picker-keybinding {
  right: 2px;
}
:root[dir=rtl] .excalidraw .color-picker-keybinding {
  left: 2px;
}
.excalidraw--mobile.excalidraw .color-picker-keybinding {
  display: none;
}
.excalidraw .color-picker-type-canvasBackground .color-picker-keybinding {
  color: #aaa;
}
.excalidraw .color-picker-type-elementBackground .color-picker-keybinding {
  color: #ffffff;
}
.excalidraw .color-picker-swatch[aria-label=transparent] .color-picker-keybinding {
  color: #aaa;
}
.excalidraw .color-picker-type-elementStroke .color-picker-keybinding {
  color: #d4d4d4;
}
.excalidraw.theme--dark .color-picker-type-elementBackground .color-picker-keybinding {
  color: #000000;
}
.excalidraw.theme--dark .color-picker-swatch[aria-label=transparent] .color-picker-keybinding {
  color: #000000;
}

/* components/IconPicker.scss */
.excalidraw .picker {
  padding: 0.5rem;
  background: var(--popup-bg-color);
  border: 0 solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow-island);
  border-radius: 4px;
  position: absolute;
}
:root[dir=rtl] .excalidraw .picker {
  padding: 0.4rem;
}
.excalidraw .picker-container button,
.excalidraw .picker button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.excalidraw .picker-container button:focus-visible,
.excalidraw .picker button:focus-visible {
  outline: transparent;
  background-color: var(--button-gray-2);
}
.excalidraw .picker-container button:focus-visible svg,
.excalidraw .picker button:focus-visible svg {
  opacity: 1;
}
.excalidraw .picker-container button:hover,
.excalidraw .picker button:hover {
  background-color: var(--button-gray-2);
}
.excalidraw .picker-container button:active,
.excalidraw .picker button:active {
  background-color: var(--button-gray-3);
}
.excalidraw .picker-container button:disabled,
.excalidraw .picker button:disabled {
  cursor: not-allowed;
}
.excalidraw .picker-container button svg,
.excalidraw .picker button svg {
  margin: 0;
  width: 36px;
  height: 18px;
  pointer-events: none;
}
.excalidraw .picker button {
  padding: 0.25rem 0.28rem 0.35rem 0.25rem;
}
.excalidraw .picker-content {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 0.5rem;
  border-radius: 4px;
}
.excalidraw .picker-collapsible {
  font-size: 0.75rem;
  padding: 0.5rem 0;
}
.excalidraw .picker-keybinding {
  position: absolute;
  bottom: 2px;
  font-size: 0.7em;
  color: var(--keybinding-color);
}
:root[dir=ltr] .excalidraw .picker-keybinding {
  right: 2px;
}
:root[dir=rtl] .excalidraw .picker-keybinding {
  left: 2px;
}
.excalidraw--mobile.excalidraw .picker-keybinding {
  display: none;
}
.excalidraw .picker-type-canvasBackground .picker-keybinding {
  color: #aaa;
}
.excalidraw .picker-type-elementBackground .picker-keybinding {
  color: #ffffff;
}
.excalidraw .picker-swatch[aria-label=transparent] .picker-keybinding {
  color: #aaa;
}
.excalidraw .picker-type-elementStroke .picker-keybinding {
  color: #d4d4d4;
}
.excalidraw.theme--dark .picker-type-elementBackground .picker-keybinding {
  color: #000000;
}
.excalidraw.theme--dark .picker-swatch[aria-label=transparent] .picker-keybinding {
  color: #000000;
}

/* components/QuickSearch.scss */
.excalidraw {
  --list-border-color: var(--color-gray-20);
}
.excalidraw .QuickSearch__wrapper {
  position: relative;
  height: 2.6rem;
  border-bottom: 1px solid var(--list-border-color);
}
.excalidraw .QuickSearch__wrapper svg {
  position: absolute;
  top: 47.5%;
  transform: translateY(-50%);
  left: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-40);
  z-index: 1;
}
.excalidraw.theme--dark {
  --list-border-color: var(--color-gray-80);
}
.excalidraw.theme--dark .QuickSearch__wrapper {
  border-bottom: none;
}
.excalidraw .QuickSearch__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border: 0 !important;
  font-size: 0.875rem;
  padding-left: 2.5rem !important;
  padding-right: 0.75rem !important;
}
.excalidraw .QuickSearch__input::placeholder {
  color: var(--color-gray-40);
}
.excalidraw .QuickSearch__input:focus {
  box-shadow: none !important;
}

/* components/ScrollableList.scss */
.excalidraw .ScrollableList__wrapper {
  position: static !important;
  border: none;
  font-size: 0.875rem;
  overflow-y: auto;
}
.excalidraw .ScrollableList__wrapper > .empty,
.excalidraw .ScrollableList__wrapper > .hint {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-gray-60);
  overflow: hidden;
  text-align: center;
  line-height: 150%;
}

/* components/FontPicker/FontPicker.scss */
.excalidraw .FontPicker__container {
  display: grid;
  grid-template-columns: calc(1rem + 3 * var(--default-button-size)) 1rem 1fr;
  align-items: center;
}
.excalidraw--mobile.excalidraw .FontPicker__container {
  max-width: calc(2rem + 4 * var(--default-button-size));
}

/* components/Range.scss */
.excalidraw {
  --slider-thumb-size: 16px;
}
.excalidraw .range-wrapper {
  position: relative;
  padding-top: 10px;
  padding-bottom: 30px;
}
.excalidraw .range-input {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  background: var(--color-slider-track);
  border-radius: 2px;
  outline: none;
}
.excalidraw .range-input::-webkit-slider-thumb {
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--color-slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.excalidraw .range-input::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--color-slider-thumb);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.excalidraw .value-bubble {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-primary-color);
}
.excalidraw .zero-label {
  position: absolute;
  bottom: 0;
  left: 4px;
  font-size: 12px;
  color: var(--text-primary-color);
}

/* components/Tooltip.scss */
.excalidraw-tooltip {
  --ui-font:
    Assistant,
    system-ui,
    BlinkMacSystemFont,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-family: var(--ui-font);
  position: fixed;
  z-index: var(--zIndex-popup);
  padding: 8px;
  border-radius: 6px;
  box-sizing: border-box;
  pointer-events: none;
  word-wrap: break-word;
  background: #000000;
  line-height: 1.5;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  display: none;
}
.excalidraw-tooltip.excalidraw-tooltip--visible {
  display: block;
}
.excalidraw-tooltip-wrapper {
  display: flex;
}
.excalidraw-tooltip-icon {
  width: 0.9em;
  height: 0.9em;
  margin-left: 5px;
  margin-top: 1px;
  display: flex;
}
.excalidraw--mobile.excalidraw-tooltip-icon {
  display: none;
}

/* components/TextInput.scss */
.excalidraw .TextInput {
  display: inline-block;
}

/* components/ProjectName.scss */
.ProjectName {
  margin: auto;
  display: flex;
  align-items: center;
}
.ProjectName .TextInput {
  height: calc(1rem - 3px);
  width: 200px;
  overflow: hidden;
  text-align: center;
  margin-left: 8px;
  text-overflow: ellipsis;
}
.ProjectName .TextInput--readonly {
  background: none;
  border: none;
  width: auto;
  max-width: 200px;
  padding-left: 2px;
}
.ProjectName .TextInput--readonly:hover {
  background: none;
}

/* components/CheckboxItem.scss */
.excalidraw .Checkbox {
  margin: 4px 0.3em;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.excalidraw .Checkbox:hover:not(.is-checked) .Checkbox-box:not(:focus) {
  box-shadow: 0 0 0 2px #4dabf7;
}
.excalidraw .Checkbox:hover:not(.is-checked) .Checkbox-box:not(:focus) svg {
  display: block;
  opacity: 0.3;
}
.excalidraw .Checkbox:active .Checkbox-box {
  box-shadow: 0 0 2px 1px inset #1c7ed6 !important;
}
.excalidraw .Checkbox:hover .Checkbox-box {
  background-color: rgba(208, 235, 255, 0.2);
}
.excalidraw .Checkbox.is-checked .Checkbox-box {
  background-color: #d0ebff;
}
.excalidraw .Checkbox.is-checked .Checkbox-box svg {
  display: block;
}
.excalidraw .Checkbox.is-checked:hover .Checkbox-box {
  background-color: #a5d8ff;
}
.excalidraw .Checkbox .Checkbox-box {
  width: 22px;
  height: 22px;
  padding: 0;
  flex: 0 0 auto;
  margin: 0 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #1c7ed6;
  background-color: transparent;
  border-radius: 4px;
  color: #1c7ed6;
  border: 0;
}
.excalidraw .Checkbox .Checkbox-box:focus {
  box-shadow: 0 0 0 3px #1c7ed6;
}
.excalidraw .Checkbox .Checkbox-box svg {
  display: none;
  width: 16px;
  height: 16px;
  stroke-width: 3px;
}
.excalidraw .Checkbox .Checkbox-label {
  display: flex;
  align-items: center;
}
.excalidraw .Checkbox .excalidraw-tooltip-icon {
  width: 1em;
  height: 1em;
}

/* components/Avatar.scss */
.excalidraw .Avatar {
  width: var(--avatar-size, 1.5rem);
  height: var(--avatar-size, 1.5rem);
  position: relative;
  border-radius: 100%;
  outline-offset: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gray-90);
  flex: 0 0 auto;
}
.excalidraw .Avatar:active {
  transform: scale(0.94);
}
.excalidraw .Avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.excalidraw .Avatar::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: 100%;
}
.excalidraw .Avatar.is-followed::before {
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 1px var(--color-primary-hover);
}
.excalidraw .Avatar.is-current-user {
  cursor: auto;
}

/* components/hyperlink/Hyperlink.scss */
.excalidraw-hyperlinkContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.3);
  z-index: var(--zIndex-hyperlinkContainer);
  background: var(--island-bg-color);
  border-radius: var(--border-radius-md);
  box-sizing: border-box;
  min-height: 42px;
}
.excalidraw-hyperlinkContainer-input,
.excalidraw-hyperlinkContainer button {
  z-index: 100;
}
.excalidraw-hyperlinkContainer-input,
.excalidraw-hyperlinkContainer-link {
  height: 24px;
  padding: 0 8px;
  line-height: 24px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--ui-font);
}
.excalidraw-hyperlinkContainer-input {
  width: 18rem;
  background-color: transparent;
  color: var(--text-primary-color);
  outline: none;
  border: none;
  box-shadow: none !important;
}
.excalidraw-hyperlinkContainer-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 15rem;
}
.excalidraw-hyperlinkContainer button {
  color: #228be6;
  background-color: transparent !important;
  font-weight: 500;
}
.excalidraw-hyperlinkContainer button.excalidraw-hyperlinkContainer--remove {
  color: #c92a2a;
}
.excalidraw-hyperlinkContainer--remove .ToolIcon__icon svg {
  color: #fa5252;
}
.excalidraw-hyperlinkContainer .ToolIcon__icon {
  width: 2rem;
  height: 2rem;
}
.excalidraw-hyperlinkContainer__buttons {
  flex: 0 0 auto;
}

/* components/Dialog.scss */
.excalidraw .Dialog {
  -webkit-user-select: text;
          user-select: text;
  cursor: auto;
}
.excalidraw .Dialog__title {
  margin: 0;
  text-align: left;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--dialog-border-color);
  padding: 0 0 0.75rem;
  margin-bottom: 1.5rem;
}
.excalidraw .Dialog__close {
  color: var(--color-gray-40);
  margin: 0;
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  border: 0;
  background-color: transparent;
  line-height: 0;
  cursor: pointer;
}
.excalidraw .Dialog__close:hover {
  color: var(--color-gray-60);
}
.excalidraw .Dialog__close:active {
  color: var(--color-gray-40);
}
.excalidraw .Dialog__close svg {
  width: 1.5rem;
  height: 1.5rem;
}
.excalidraw .Dialog__close + .Dialog__content {
  --offset: 28px;
  height: calc(100% - var(--offset)) !important;
  margin-top: var(--offset) !important;
}
.excalidraw .Dialog--fullscreen .Dialog__close {
  top: 1.25rem;
  right: 1.25rem;
}

/* components/Modal.scss */
.excalidraw.excalidraw-modal-container {
  position: absolute;
  z-index: var(--zIndex-modal);
}
.excalidraw .Modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: calc(var(--space-factor) * 10);
  display: flex;
  flex-direction: column;
}
.excalidraw .Modal .Island {
  padding: 2.5rem;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.excalidraw .Modal.animations-disabled .Modal__background {
  animation: none;
}
.excalidraw .Modal.animations-disabled .Modal__content {
  animation: none;
  opacity: 1;
}
.excalidraw .Modal__background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(18, 18, 18, 0.2);
  animation: Modal__background__fade-in 0.1s linear forwards;
}
.excalidraw .Modal__content {
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  max-height: 100%;
  opacity: 0;
  transform: translateY(10px);
  animation: Modal__content_fade-in 0.025s ease-out 0s forwards;
  position: relative;
  overflow-y: auto;
  background: var(--island-bg-color);
  border: 1px solid var(--dialog-border-color);
  box-shadow: var(--modal-shadow);
  border-radius: 0.75rem;
  box-sizing: border-box;
}
.excalidraw .Modal__content:focus {
  outline: none;
}
@keyframes Modal__background__fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes Modal__content_fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.excalidraw .Modal__close {
  color: var(--icon-fill-color);
  margin: 0;
  padding: 0.375rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background-color: transparent;
  line-height: 0;
  cursor: pointer;
}
.excalidraw .Modal__close svg {
  width: 1.5rem;
  height: 1.5rem;
}
.excalidraw .Dialog--fullscreen .Modal {
  padding: 0;
}
.excalidraw .Dialog--fullscreen .Modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

/* components/Stack.scss */
.excalidraw .Stack {
  --gap: 0;
  display: grid;
  gap: calc(var(--space-factor) * var(--gap));
}
.excalidraw .Stack_vertical {
  grid-template-columns: auto;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
}
.excalidraw .Stack_horizontal {
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
}

/* components/ConfirmDialog.scss */
.excalidraw .confirm-dialog-buttons {
  display: flex;
  column-gap: 0.5rem;
  justify-content: flex-end;
}

/* components/DialogActionButton.scss */
.excalidraw .Dialog__action-button {
  position: relative;
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--default-border-color);
  background-color: transparent;
  height: 3rem;
  border-radius: var(--border-radius-lg);
  letter-spacing: 0.4px;
  color: inherit;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .Dialog__action-button svg {
  display: block;
  width: 1rem;
  height: 1rem;
}
.excalidraw .Dialog__action-button--danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.excalidraw .Dialog__action-button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.excalidraw.theme--dark .Dialog__action-button--danger {
  color: var(--color-gray-100);
}
.excalidraw.theme--dark .Dialog__action-button--primary {
  color: var(--color-gray-100);
}

/* components/PublishLibrary.scss */
.excalidraw .publish-library__fields {
  display: flex;
  flex-direction: column;
}
.excalidraw .publish-library__fields label {
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.excalidraw .publish-library__fields label span {
  font-weight: 500;
  font-size: 1rem;
  color: #868e96;
}
.excalidraw .publish-library__fields label input,
.excalidraw .publish-library__fields label textarea {
  width: 70%;
  padding: 0.6em;
  font-family: var(--ui-font);
}
.excalidraw .publish-library__fields label .required {
  color: #e03131;
  margin: 0.2rem;
}
.excalidraw .publish-library__buttons {
  display: flex;
  padding: 0.2rem 0;
  justify-content: flex-end;
  gap: 0.5rem;
}
.excalidraw .publish-library__buttons .ToolIcon__icon {
  min-width: 2.5rem;
  width: auto;
  font-size: 1rem;
}
.excalidraw .publish-library__buttons .ToolIcon_type_button {
  margin-left: 1rem;
  padding: 0 0.5rem;
}
.excalidraw .publish-library__buttons--confirm.ToolIcon_type_button {
  background-color: #228be6;
}
.excalidraw .publish-library__buttons--confirm.ToolIcon_type_button:hover {
  background-color: #1971c2;
}
.excalidraw .publish-library__buttons--cancel.ToolIcon_type_button {
  background-color: #adb5bd;
}
.excalidraw .publish-library__buttons--cancel.ToolIcon_type_button:hover {
  background-color: #868e96;
}
.excalidraw .publish-library__buttons .ToolIcon__icon {
  color: #ffffff;
}
.excalidraw .publish-library__buttons .ToolIcon__icon .Spinner {
  --spinner-color: #fff;
}
.excalidraw .publish-library__buttons .ToolIcon__icon .Spinner svg {
  padding: 0.5rem;
}
.excalidraw .publish-library .selected-library-items {
  display: flex;
  flex-wrap: wrap;
}
.excalidraw .publish-library .selected-library-items .single-library-item-wrapper {
  width: 9rem;
}
.excalidraw .publish-library-warning {
  color: #fa5252;
}
.excalidraw .publish-library-note {
  padding: 1em 0;
  font-style: italic;
  font-size: 14px;
  display: block;
}
.excalidraw .single-library-item {
  position: relative;
}
.excalidraw .single-library-item-status {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  font-size: 0.7rem;
  color: #f03e3e;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}
.excalidraw .single-library-item__svg {
  background-color: #ffffff;
  padding: 0.3rem;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid var(--button-gray-2);
}
.excalidraw .single-library-item__svg svg {
  width: 100%;
  height: 100%;
}
.excalidraw .single-library-item .ToolIcon__icon {
  background-color: #ffffff;
  width: auto;
  height: auto;
  margin: 0 0.5rem;
}
.excalidraw .single-library-item .ToolIcon,
.excalidraw .single-library-item .ToolIcon_type_button:hover {
  background-color: white;
}
.excalidraw .single-library-item .required,
.excalidraw .single-library-item .error {
  color: #e03131;
  font-weight: 700;
  font-size: 1rem;
  margin: 0.2rem;
}
.excalidraw .single-library-item .error {
  font-weight: 500;
  margin: 0;
  padding: 0.3em 0;
}
.excalidraw .single-library-item--remove {
  position: absolute;
  top: 0.2rem;
  right: 1rem;
}
.excalidraw .single-library-item--remove .ToolIcon__icon {
  margin: 0;
  background-color: #fa5252;
}
.excalidraw .single-library-item--remove .ToolIcon__icon:hover {
  background-color: #f03e3e;
}
.excalidraw .single-library-item--remove .ToolIcon__icon:active {
  background-color: #e03131;
}
.excalidraw .single-library-item--remove svg {
  color: #ffffff;
  padding: 0.26rem;
  border-radius: 0.3em;
  width: 1rem;
  height: 1rem;
}

/* components/dropdownMenu/DropdownMenu.scss */
.excalidraw .dropdown-menu {
  position: absolute;
  top: 100%;
  margin-top: 0.5rem;
}
.excalidraw .dropdown-menu--mobile {
  left: 0;
  width: 100%;
  row-gap: 0.75rem;
}
.excalidraw .dropdown-menu--mobile .dropdown-menu-container {
  padding: 8px 8px;
  box-sizing: border-box;
  box-shadow: var(--shadow-island);
  border-radius: var(--border-radius-lg);
  position: relative;
  transition: box-shadow 0.5s ease-in-out;
}
.excalidraw .dropdown-menu--mobile .dropdown-menu-container.zen-mode {
  box-shadow: none;
}
.excalidraw .dropdown-menu .dropdown-menu-container {
  background-color: var(--island-bg-color);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  --gap: 2;
}
.excalidraw .dropdown-menu .dropdown-menu-item-base {
  display: flex;
  column-gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  font-family: inherit;
}
.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item:hover {
  background-color: transparent;
}
.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item--hovered {
  background-color: var(--button-hover-bg) !important;
}
.excalidraw .dropdown-menu.manual-hover .dropdown-menu-item--selected {
  background-color: var(--color-primary-light) !important;
}
.excalidraw .dropdown-menu.fonts {
  margin-top: 1rem;
  max-height: calc(7 * (2rem + 2px) + 2.95rem + 1rem);
}
@media screen and (min-width: 1921px) {
  .excalidraw .dropdown-menu.fonts {
    max-height: calc(7 * (2.25rem + 2px) + 2.95rem + 1rem);
  }
}
.excalidraw .dropdown-menu.fonts .dropdown-menu-item-base {
  display: inline-flex;
}
.excalidraw .dropdown-menu.fonts .dropdown-menu-group:not(:first-child) {
  margin-top: 1rem;
}
.excalidraw .dropdown-menu.fonts .dropdown-menu-group-title {
  font-size: 0.75rem;
  text-align: left;
  font-weight: 400;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.excalidraw .dropdown-menu .dropdown-menu-item {
  height: 2rem;
  margin: 1px;
  padding: 0 0.5rem;
  width: calc(100% - 2px);
  background-color: transparent;
  border: 1px solid transparent;
  align-items: center;
  cursor: pointer;
  border-radius: var(--border-radius-md);
}
@media screen and (min-width: 1921px) {
  .excalidraw .dropdown-menu .dropdown-menu-item {
    height: 2.25rem;
  }
}
.excalidraw .dropdown-menu .dropdown-menu-item__text {
  display: flex;
  align-items: center;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  gap: 0.75rem;
}
.excalidraw .dropdown-menu .dropdown-menu-item__shortcut {
  margin-inline-start: auto;
  opacity: 0.5;
}
.excalidraw .dropdown-menu .dropdown-menu-item__shortcut--orphaned {
  text-align: right;
  font-size: 0.875rem;
  padding: 0 0.625rem;
}
.excalidraw .dropdown-menu .dropdown-menu-item--selected {
  background: var(--color-primary-light);
  --icon-fill-color: var(--color-primary-darker);
}
.excalidraw .dropdown-menu .dropdown-menu-item:hover {
  background-color: var(--button-hover-bg);
  text-decoration: none;
}
.excalidraw .dropdown-menu .dropdown-menu-item:active {
  background-color: var(--button-hover-bg);
  border-color: var(--color-brand-active);
}
.excalidraw .dropdown-menu .dropdown-menu-item svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.excalidraw .dropdown-menu .dropdown-menu-item-bare {
  align-items: center;
  height: 2rem;
  justify-content: space-between;
}
@media screen and (min-width: 1921px) {
  .excalidraw .dropdown-menu .dropdown-menu-item-bare {
    height: 2.25rem;
  }
}
.excalidraw .dropdown-menu .dropdown-menu-item-bare svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
.excalidraw .dropdown-menu .dropdown-menu-item-custom {
  margin-top: 0.5rem;
}
.excalidraw .dropdown-menu .dropdown-menu-group-title {
  font-size: 14px;
  text-align: left;
  margin: 10px 0;
  font-weight: 500;
}
.excalidraw .dropdown-menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  width: var(--lg-button-size);
  height: var(--lg-button-size);
  --background: var(--color-surface-mid);
  background-color: var(--background);
}
.excalidraw .dropdown-menu-button svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .dropdown-menu-button:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .dropdown-menu-button:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .dropdown-menu-button.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .dropdown-menu-button.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .dropdown-menu-button.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw.theme--dark.excalidraw .dropdown-menu-button {
  --background: var(--color-surface-high);
}
.excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
  --background: #363541;
}
.excalidraw .dropdown-menu-button:hover {
  --background: var(--color-surface-high);
  background-color: var(--background);
  text-decoration: none;
}
.excalidraw .dropdown-menu-button:active {
  border-color: var(--color-primary);
}
.excalidraw .dropdown-menu-button svg {
  width: var(--lg-icon-size);
  height: var(--lg-icon-size);
}
.excalidraw .dropdown-menu-button--mobile {
  border: none;
  margin: 0;
  padding: 0;
  width: var(--default-button-size);
  height: var(--default-button-size);
}

/* components/LibraryUnit.scss */
.excalidraw .library-unit {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  position: relative;
  width: 55px;
  height: 55px;
  box-sizing: border-box;
  border-radius: var(--border-radius-lg);
}
.excalidraw .library-unit svg {
  pointer-events: none;
}
.excalidraw .library-unit--hover {
  border-color: var(--color-primary);
}
.excalidraw .library-unit--selected {
  border-color: var(--color-primary);
  border-width: 1px;
}
.excalidraw .library-unit--skeleton {
  opacity: 0.5;
  background:
    linear-gradient(
      -45deg,
      var(--color-gray-10),
      var(--color-gray-20),
      var(--color-gray-10));
  background-size: 200% 200%;
  animation: library-unit__skeleton-opacity-animation 0.2s linear;
}
.excalidraw.theme--dark .library-unit--skeleton {
  background-image:
    linear-gradient(
      -45deg,
      var(--color-gray-100),
      var(--color-gray-80),
      var(--color-gray-100));
}
.excalidraw .library-unit__dragger {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.excalidraw .library-unit__dragger > svg {
  filter: var(--theme-filter);
  flex-grow: 1;
  max-height: 100%;
  max-width: 100%;
}
.excalidraw .library-unit__checkbox-container,
.excalidraw .library-unit__checkbox-container:hover,
.excalidraw .library-unit__checkbox-container:active {
  align-items: center;
  background: none;
  border: none;
  color: var(--icon-fill-color);
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  cursor: pointer;
}
.excalidraw .library-unit__checkbox-container input,
.excalidraw .library-unit__checkbox-container:hover input,
.excalidraw .library-unit__checkbox-container:active input {
  cursor: pointer;
}
.excalidraw .library-unit__checkbox {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  margin: 0;
}
.excalidraw .library-unit__checkbox .Checkbox-box {
  margin: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  background-color: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  box-shadow: none !important;
  padding: 2px;
}
.excalidraw .library-unit__checkbox.Checkbox:hover .Checkbox-box {
  background-color: var(--color-primary-light);
}
.excalidraw .library-unit__checkbox.is-checked .Checkbox-box {
  background-color: var(--color-primary) !important;
}
.excalidraw .library-unit__checkbox.is-checked .Checkbox-box svg {
  color: var(--color-primary-light);
}
.excalidraw .library-unit__removeFromLibrary > svg {
  height: 16px;
  width: 16px;
}
.excalidraw .library-unit__adder {
  transform: scale(1);
  animation: library-unit__adder-animation 1s ease-in infinite;
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-primary);
  border-radius: var(--border-radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.excalidraw .library-unit__adder svg {
  color: var(--color-primary-light);
  width: 1rem;
  height: 1rem;
}
.excalidraw .library-unit:active .library-unit__adder {
  animation: none;
  transform: scale(0.8);
}
.excalidraw .library-unit__active {
  cursor: pointer;
}
@keyframes library-unit__adder-animation {
  0% {
    transform: scale(0.85);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}
@keyframes library-unit__skeleton-opacity-animation {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

/* components/LibraryMenuItems.scss */
.excalidraw {
  --container-padding-y: 1.5rem;
  --container-padding-x: 0.75rem;
}
.excalidraw .library-menu-items__no-items {
  text-align: center;
  color: var(--color-gray-70);
  line-height: 1.5;
  font-size: 0.875rem;
  width: 100%;
}
.excalidraw .library-menu-items__no-items__label {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.excalidraw.theme--dark .library-menu-items__no-items {
  color: var(--color-gray-40);
}
.excalidraw .library-menu-items-container {
  width: 100%;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow-y: auto;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;
  position: relative;
}
.excalidraw .library-menu-items-container > div {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.excalidraw .library-menu-items-container__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.excalidraw .library-menu-items-container__items {
  row-gap: 0.5rem;
  padding: var(--container-padding-y) 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 1rem;
}
.excalidraw .library-menu-items-container__header {
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  width: 100%;
  padding-right: 4rem;
  box-sizing: border-box;
}
.excalidraw .library-menu-items-container__header--excal {
  margin-top: 2rem;
}
.excalidraw .library-menu-items-container__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
}
.excalidraw .library-menu-items-container .separator {
  width: 100%;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0.6em 0.2em;
  color: var(--text-primary-color);
}
.excalidraw .library-menu-items-private-library-container {
  min-height: 3.75rem;
  width: 100%;
}

/* components/LibraryMenu.scss */
.excalidraw .layer-ui__library {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.excalidraw .library-actions-counter {
  background-color: var(--color-primary);
  color: var(--color-primary-light);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  font-size: 0.625rem;
  pointer-events: none;
}
.excalidraw .layer-ui__library-message {
  padding: 2rem;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  justify-content: center;
}
.excalidraw .layer-ui__library-message span {
  font-size: 0.8em;
}
.excalidraw .publish-library-success .Dialog__content {
  display: flex;
  flex-direction: column;
}
.excalidraw .publish-library-success-close.ToolIcon_type_button {
  background-color: #228be6;
  align-self: flex-end;
}
.excalidraw .publish-library-success-close.ToolIcon_type_button:hover {
  background-color: #1971c2;
}
.excalidraw .publish-library-success-close.ToolIcon_type_button .ToolIcon__icon {
  width: auto;
  font-size: 1rem;
  color: #ffffff;
  padding: 0 0.5rem;
}
.excalidraw .library-menu-control-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  position: relative;
}
.excalidraw .library-menu-control-buttons--at-bottom::before {
  content: "";
  width: calc(100% - 1.5rem);
  height: 1px;
  position: absolute;
  top: -1px;
  background: var(--sidebar-border-color);
}
.excalidraw .library-menu-browse-button {
  flex: 1;
  height: var(--lg-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-lg);
  background-color: var(--color-primary);
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.75rem;
}
.excalidraw .library-menu-browse-button:hover {
  background-color: var(--color-brand-hover);
}
.excalidraw .library-menu-browse-button:active {
  background-color: var(--color-brand-active);
}
.excalidraw.theme--dark .library-menu-browse-button {
  color: var(--color-gray-100);
}
.excalidraw.excalidraw--mobile .library-menu-browse-button {
  height: var(--default-button-size);
}
.excalidraw .layer-ui__library .dropdown-menu {
  width: auto;
  top: initial;
  right: 0;
  left: initial;
  bottom: 100%;
  margin-bottom: 0.625rem;
}
.excalidraw .layer-ui__library .dropdown-menu .dropdown-menu-container {
  width: 196px;
  box-shadow: var(--library-dropdown-shadow);
  border-radius: var(--border-radius-lg);
  padding: 0.25rem 0.5rem;
}
.excalidraw .layer-ui__library .library-menu-dropdown-container {
  position: relative;
}
.excalidraw .layer-ui__library .library-menu-dropdown-container--in-heading {
  padding: 0;
  position: absolute;
  top: 1rem;
  right: 0.75rem;
  z-index: 1;
}
.excalidraw .layer-ui__library .library-menu-dropdown-container--in-heading .dropdown-menu {
  top: 100%;
}

/* components/TextField.scss */
.excalidraw {
  --ExcTextField--color: var(--color-on-surface);
  --ExcTextField--label-color: var(--color-on-surface);
  --ExcTextField--background: var(--color-surface-low);
  --ExcTextField--readonly--background: var(--color-surface-high);
  --ExcTextField--readonly--color: var(--color-on-surface);
  --ExcTextField--border: var(--color-gray-20);
  --ExcTextField--readonly--border: var(--color-border-outline-variant);
  --ExcTextField--border-hover: var(--color-brand-hover);
  --ExcTextField--border-active: var(--color-brand-active);
  --ExcTextField--placeholder: var(--color-border-outline-variant);
}
.excalidraw .ExcTextField {
  position: relative;
}
.excalidraw .ExcTextField svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-40);
  z-index: 1;
}
.excalidraw .ExcTextField--fullWidth {
  width: 100%;
  flex-grow: 1;
}
.excalidraw .ExcTextField__label {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 150%;
  color: var(--ExcTextField--label-color);
  margin-bottom: 0.25rem;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .ExcTextField__input {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3rem;
  background: var(--ExcTextField--background);
  border: 1px solid var(--ExcTextField--border);
  border-radius: 0.5rem;
  padding: 0 0.75rem;
}
.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):hover {
  border-color: var(--ExcTextField--border-hover);
}
.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):active,
.excalidraw .ExcTextField__input:not(.excalidraw .ExcTextField__input--readonly):focus-within {
  border-color: var(--ExcTextField--border-active);
}
.excalidraw .ExcTextField__input input {
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  height: 1.5rem;
  color: var(--ExcTextField--color);
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  text-overflow: ellipsis;
  background: transparent;
  width: 100%;
}
.excalidraw .ExcTextField__input input:not(:focus):hover {
  background-color: initial;
}
.excalidraw .ExcTextField__input input:focus {
  outline: initial;
  box-shadow: initial;
}
.excalidraw .ExcTextField__input--readonly {
  background: var(--ExcTextField--readonly--background);
  border-color: var(--ExcTextField--readonly--border);
}
.excalidraw .ExcTextField__input--readonly input {
  color: var(--ExcTextField--readonly--color);
}
.excalidraw .ExcTextField--hasIcon .ExcTextField__input {
  padding-left: 2.5rem;
}

/* components/Button.scss */
.excalidraw {
  --theme-filter: none;
  --button-destructive-bg-color: #ffe3e3;
  --button-destructive-color: #c92a2a;
  --button-gray-1: #e9ecef;
  --button-gray-2: #ced4da;
  --button-gray-3: #adb5bd;
  --button-special-active-bg-color: #ebfbee;
  --dialog-border-color: var(--color-gray-20);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #a5d8ff;
  --icon-fill-color: var(--color-on-surface);
  --icon-green-fill-color: #2b8a3e;
  --default-bg-color: #ffffff;
  --input-bg-color: #ffffff;
  --input-border-color: #ced4da;
  --input-hover-bg-color: #f1f3f5;
  --input-label-color: #495057;
  --island-bg-color: #ffffff;
  --keybinding-color: var(--color-gray-40);
  --link-color: #1c7ed6;
  --overlay-bg-color: rgba(255, 255, 255, 0.88);
  --popup-bg-color: var(--island-bg-color);
  --popup-secondary-bg-color: #f1f3f5;
  --popup-text-color: #000000;
  --popup-text-inverted-color: #ffffff;
  --select-highlight-color: #339af0;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
  --default-border-color: var(--color-surface-high);
  --default-button-size: 2rem;
  --default-icon-size: 1rem;
  --lg-button-size: 2.25rem;
  --lg-icon-size: 1rem;
  --editor-container-padding: 1rem;
  --scrollbar-thumb: var(--button-gray-2);
  --scrollbar-thumb-hover: var(--button-gray-3);
  --color-slider-track: hsl(240, 100%, 90%);
  --color-slider-thumb: var(--color-gray-80);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-20);
  --sidebar-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --sidebar-border-color: var(--color-surface-high);
  --sidebar-bg-color: var(--island-bg-color);
  --library-dropdown-shadow:
    0px 15px 6px rgba(0, 0, 0, 0.01),
    0px 8px 5px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.09),
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1);
  --space-factor: 0.25rem;
  --text-primary-color: var(--color-on-surface);
  --color-selection: #6965db;
  --color-icon-white: #ffffff;
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-light-darker: #d7d5ff;
  --color-primary-hover: #5753d0;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;
  --color-gray-85: #242424;
  --color-gray-90: #1e1e1e;
  --color-gray-100: #121212;
  --color-disabled: var(--color-gray-40);
  --color-warning: #fceeca;
  --color-warning-dark: #f5c354;
  --color-warning-darker: #f3ab2c;
  --color-warning-darkest: #ec8b14;
  --color-text-warning: var(--text-primary-color);
  --color-danger: #db6965;
  --color-danger-dark: #db6965;
  --color-danger-darker: #d65550;
  --color-danger-darkest: #d1413c;
  --color-danger-text: black;
  --color-danger-background: #fff0f0;
  --color-danger-icon-background: #ffdad6;
  --color-danger-color: #700000;
  --color-danger-icon-color: #700000;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--text-primary-color);
  --color-warning-icon-color: var(--text-primary-color);
  --color-muted: var(--color-gray-30);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-100);
  --color-muted-background: var(--color-gray-80);
  --color-muted-background-darker: var(--color-gray-100);
  --color-promo: var(--color-primary);
  --color-success: #cafccc;
  --color-success-darker: #bafabc;
  --color-success-darkest: #a5eba8;
  --color-success-text: #268029;
  --color-success-contrast: #65bb6a;
  --color-success-contrast-hover: #6bcf70;
  --color-success-contrast-active: #6edf74;
  --color-logo-icon: var(--color-primary);
  --color-logo-text: #190064;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --color-surface-high: #f1f0ff;
  --color-surface-mid: #f2f2f7;
  --color-surface-low: #ececf4;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1b1b1f;
  --color-brand-hover: #5753d0;
  --color-on-primary-container: #030064;
  --color-brand-active: #4440bf;
  --color-border-outline: #767680;
  --color-border-outline-variant: #c5c5d0;
  --color-surface-primary-container: #e0dfff;
  --color-badge: #0b6513;
  --background-color-badge: #d3ffd2;
}
@media screen and (min-device-width: 1921px) {
  .excalidraw {
    --lg-button-size: 2.5rem;
    --lg-icon-size: 1.25rem;
    --default-button-size: 2.25rem;
    --default-icon-size: 1.25rem;
  }
}
.excalidraw.theme--dark.theme--dark-background-none {
  background: none;
}
.excalidraw.theme--dark {
  --theme-filter: invert(93%) hue-rotate(180deg);
  --button-destructive-bg-color: #5a0000;
  --button-destructive-color: #ffa8a8;
  --button-gray-1: #363636;
  --button-gray-2: #272727;
  --button-gray-3: #222;
  --button-special-active-bg-color: #204624;
  --dialog-border-color: var(--color-gray-80);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #228be6;
  --icon-green-fill-color: #69db7c;
  --default-bg-color: #121212;
  --input-bg-color: #121212;
  --input-border-color: #2e2e2e;
  --input-hover-bg-color: #181818;
  --input-label-color: #e9ecef;
  --island-bg-color: #232329;
  --keybinding-color: var(--color-gray-60);
  --link-color: #4dabf7;
  --overlay-bg-color: rgba(52, 58, 64, 0.12);
  --popup-secondary-bg-color: #222;
  --popup-text-color: #ced4da;
  --popup-text-inverted-color: #2c2c2c;
  --select-highlight-color: #4dabf7;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-85);
  --scrollbar-thumb: #343a40;
  --scrollbar-thumb-hover: #495057;
  --color-slider-track: hsl(244, 23%, 39%);
  --color-selection: #3530c4;
  --color-icon-white: var(--color-gray-90);
  --color-primary: #a8a5ff;
  --color-primary-darker: #b2aeff;
  --color-primary-darkest: #beb9ff;
  --color-primary-light: #4f4d6f;
  --color-primary-light-darker: #43415e;
  --color-primary-hover: #bbb8ff;
  --color-disabled: var(--color-gray-70);
  --color-text-warning: var(--color-gray-80);
  --color-danger: #ffa8a5;
  --color-danger-dark: #672120;
  --color-danger-darker: #8f2625;
  --color-danger-darkest: #ac2b29;
  --color-danger-text: #fbcbcc;
  --color-danger-background: #fbcbcc;
  --color-danger-icon-background: #672120;
  --color-danger-color: #261919;
  --color-danger-icon-color: #fbcbcc;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--color-gray-80);
  --color-warning-icon-color: var(--color-gray-80);
  --color-muted: var(--color-gray-80);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-20);
  --color-muted-background: var(--color-gray-40);
  --color-muted-background-darker: var(--color-gray-20);
  --color-logo-text: #e2dfff;
  --color-surface-high: hsl(245, 10%, 21%);
  --color-surface-low: hsl(240, 8%, 15%);
  --color-surface-mid: hsl(240 6% 10%);
  --color-surface-lowest: hsl(0, 0%, 7%);
  --color-on-surface: #e3e3e8;
  --color-brand-hover: #bbb8ff;
  --color-on-primary-container: #e0dfff;
  --color-brand-active: #d0ccff;
  --color-border-outline: #8e8d9c;
  --color-border-outline-variant: #46464f;
  --color-surface-primary-container: #403e6a;
}
.excalidraw .excalidraw-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
}
.excalidraw .excalidraw-button svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .excalidraw-button:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .excalidraw-button:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .excalidraw-button.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .excalidraw-button.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .excalidraw-button.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}

/* components/Actions.scss */
.zoom-actions,
.undo-redo-buttons {
  background-color: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
}
.zoom-button,
.undo-redo-buttons button {
  border-radius: 0 !important;
  background-color: var(--color-surface-low) !important;
  font-size: 0.875rem !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
}
.zoom-button svg,
.undo-redo-buttons button svg {
  width: var(--lg-icon-size) !important;
  height: var(--lg-icon-size) !important;
}
.zoom-button .ToolIcon__icon,
.undo-redo-buttons button .ToolIcon__icon {
  width: 100%;
  height: 100%;
}
.reset-zoom-button {
  border-left: 0 !important;
  border-right: 0 !important;
  padding: 0 0.625rem !important;
  width: 3.75rem !important;
  justify-content: center;
  color: var(--text-primary-color);
}
.zoom-out-button {
  border-top-left-radius: var(--border-radius-lg) !important;
  border-bottom-left-radius: var(--border-radius-lg) !important;
}
:root[dir=rtl] .zoom-out-button {
  transform: scaleX(-1);
}
.zoom-out-button .ToolIcon__icon {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.zoom-in-button {
  border-top-right-radius: var(--border-radius-lg) !important;
  border-bottom-right-radius: var(--border-radius-lg) !important;
}
:root[dir=rtl] .zoom-in-button {
  transform: scaleX(-1);
}
.zoom-in-button .ToolIcon__icon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.undo-redo-buttons .undo-button-container button {
  border-top-left-radius: var(--border-radius-lg) !important;
  border-bottom-left-radius: var(--border-radius-lg) !important;
  border-right: 0 !important;
}
:root[dir=rtl] .undo-redo-buttons .undo-button-container button {
  transform: scaleX(-1);
}
.undo-redo-buttons .undo-button-container button .ToolIcon__icon {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.undo-redo-buttons .redo-button-container button {
  border-top-right-radius: var(--border-radius-lg) !important;
  border-bottom-right-radius: var(--border-radius-lg) !important;
}
:root[dir=rtl] .undo-redo-buttons .redo-button-container button {
  transform: scaleX(-1);
}
.undo-redo-buttons .redo-button-container button .ToolIcon__icon {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* components/CommandPalette/CommandPalette.scss */
.excalidraw .command-palette-dialog {
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .command-palette-dialog .Modal__content {
  height: auto;
  max-height: 100%;
}
@media screen and (min-width: 861px) {
  .excalidraw .command-palette-dialog .Modal__content {
    max-height: 750px;
    height: 100%;
  }
}
.excalidraw .command-palette-dialog .Modal__content .Island {
  height: 100%;
  padding: 1.5rem;
}
.excalidraw .command-palette-dialog .Modal__content .Dialog__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.excalidraw .command-palette-dialog .shortcuts-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  gap: 1.5rem;
}
.excalidraw .command-palette-dialog .shortcut {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  font-size: 10px;
  gap: 0.25rem;
}
.excalidraw .command-palette-dialog .shortcut .shortcut-wrapper {
  display: flex;
}
.excalidraw .command-palette-dialog .shortcut .shortcut-plus {
  margin: 0px 4px;
}
.excalidraw .command-palette-dialog .shortcut .shortcut-key {
  padding: 0px 4px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-primary-light);
}
.excalidraw .command-palette-dialog .shortcut .shortcut-desc {
  margin-left: 4px;
  color: var(--color-gray-50);
}
.excalidraw .command-palette-dialog .commands {
  overflow-y: auto;
  box-sizing: border-box;
  margin-top: 12px;
  color: var(--popup-text-color);
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .command-palette-dialog .commands .command-category {
  display: flex;
  flex-direction: column;
  padding: 12px 0px;
  margin-right: 0.25rem;
}
.excalidraw .command-palette-dialog .commands .command-category-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}
.excalidraw .command-palette-dialog .commands .command-item {
  color: var(--popup-text-color);
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.5rem;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
}
.excalidraw .command-palette-dialog .commands .command-item:active {
  background-color: var(--color-surface-low);
}
.excalidraw .command-palette-dialog .commands .command-item .name {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.excalidraw .command-palette-dialog .commands .item-selected {
  background-color: var(--color-surface-mid);
}
.excalidraw .command-palette-dialog .commands .item-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.excalidraw .command-palette-dialog .commands .no-match {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 36px;
}
.excalidraw .command-palette-dialog .icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

/* components/Popover.scss */
.excalidraw .popover {
  position: absolute;
  z-index: 10;
  padding: 5px 0 5px;
  outline: none;
}

/* components/ContextMenu.scss */
.excalidraw .context-menu {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 0;
  list-style: none;
  -webkit-user-select: none;
          user-select: none;
  margin: -0.25rem 0 0 0.125rem;
  padding: 0.5rem 0;
  background-color: var(--popup-secondary-bg-color);
  border: 1px solid var(--button-gray-3);
  cursor: default;
}
.excalidraw .context-menu button {
  color: var(--popup-text-color);
}
.excalidraw .context-menu-item {
  position: relative;
  width: 100%;
  min-width: 9.5rem;
  margin: 0;
  padding: 0.25rem 1rem 0.25rem 1.25rem;
  text-align: start;
  border-radius: 0;
  background-color: transparent;
  border: none;
  white-space: nowrap;
  font-family: inherit;
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  align-items: center;
}
.excalidraw .context-menu-item.checkmark::before {
  position: absolute;
  left: 6px;
  margin-bottom: 1px;
  content: "\2713";
}
.excalidraw .context-menu-item.dangerous .context-menu-item__label {
  color: #f03e3e;
}
.excalidraw .context-menu-item .context-menu-item__label {
  justify-self: start;
  margin-inline-end: 20px;
}
.excalidraw .context-menu-item .context-menu-item__shortcut {
  justify-self: end;
  opacity: 0.6;
  font-family: inherit;
  font-size: 0.7rem;
}
.excalidraw .context-menu-item:hover {
  color: var(--popup-bg-color);
  background-color: var(--select-highlight-color);
}
.excalidraw .context-menu-item:hover.dangerous {
  background-color: #fa5252;
}
.excalidraw .context-menu-item:hover.dangerous .context-menu-item__label {
  color: var(--popup-bg-color);
}
.excalidraw .context-menu-item:focus {
  z-index: 1;
}
.excalidraw--mobile.excalidraw .context-menu-item {
  display: block;
}
.excalidraw--mobile.excalidraw .context-menu-item .context-menu-item__label {
  margin-inline-end: 0;
}
.excalidraw--mobile.excalidraw .context-menu-item .context-menu-item__shortcut {
  display: none;
}
.excalidraw .context-menu-item-separator {
  border: none;
  border-top: 1px solid #adb5bd;
}

/* components/RadioGroup.scss */
.excalidraw {
  --RadioGroup-background: var(--island-bg-color);
  --RadioGroup-border: var(--color-surface-high);
  --RadioGroup-choice-color-off: var(--color-primary);
  --RadioGroup-choice-color-off-hover: var(--color-brand-hover);
  --RadioGroup-choice-background-off: var(--island-bg-color);
  --RadioGroup-choice-background-off-active: var(--color-surface-high);
  --RadioGroup-choice-color-on: var(--color-surface-lowest);
  --RadioGroup-choice-background-on: var(--color-primary);
  --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
  --RadioGroup-choice-background-on-active: var(--color-brand-active);
}
.excalidraw .RadioGroup {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 3px;
  border-radius: 10px;
  background: var(--RadioGroup-background);
  border: 1px solid var(--RadioGroup-border);
}
.excalidraw .RadioGroup__choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  color: var(--RadioGroup-choice-color-off);
  background: var(--RadioGroup-choice-background-off);
  border-radius: 8px;
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 100%;
  -webkit-user-select: none;
          user-select: none;
  letter-spacing: 0.4px;
  transition: all 75ms ease-out;
}
.excalidraw .RadioGroup__choice:hover {
  color: var(--RadioGroup-choice-color-off-hover);
}
.excalidraw .RadioGroup__choice:active {
  background: var(--RadioGroup-choice-background-off-active);
}
.excalidraw .RadioGroup__choice.active {
  color: var(--RadioGroup-choice-color-on);
  background: var(--RadioGroup-choice-background-on);
}
.excalidraw .RadioGroup__choice.active:hover {
  background: var(--RadioGroup-choice-background-on-hover);
}
.excalidraw .RadioGroup__choice.active:active {
  background: var(--RadioGroup-choice-background-on-active);
}
.excalidraw .RadioGroup__choice input {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  appearance: none;
  cursor: pointer;
}

/* components/Switch.scss */
.excalidraw {
  --Switch-disabled-color: var(--color-border-outline);
  --Switch-disabled-toggled-background: var(--color-border-outline-variant);
  --Switch-disabled-border: var(--color-border-outline-variant);
  --Switch-track-background: var(--island-bg-color);
  --Switch-thumb-background: var(--color-on-surface);
  --Switch-hover-background: var(--color-brand-hover);
  --Switch-active-background: var(--color-brand-active);
}
.excalidraw .Switch {
  position: relative;
  box-sizing: border-box;
  width: 40px;
  height: 20px;
  border-radius: 12px;
  transition-property: background, border;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  background: var(--Switch-track-background);
  border: 1px solid var(--Switch-disabled-color);
}
.excalidraw .Switch:hover {
  background: var(--Switch-track-background);
  border: 1px solid var(--Switch-hover-background);
}
.excalidraw .Switch:active {
  border: 1px solid var(--Switch-active-background);
}
.excalidraw .Switch.toggled {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.excalidraw .Switch.toggled:hover {
  background: var(--color-primary-darker);
  border: 1px solid var(--color-primary-darker);
}
.excalidraw .Switch.disabled {
  background: var(--Switch-track-background);
  border: 1px solid var(--Switch-disabled-border);
}
.excalidraw .Switch.disabled.toggled {
  background: var(--Switch-disabled-toggled-background);
  border: 1px solid var(--Switch-disabled-toggled-background);
}
.excalidraw .Switch:before {
  content: "";
  box-sizing: border-box;
  display: block;
  pointer-events: none;
  position: absolute;
  border-radius: 100%;
  transition: all 150ms ease-out;
  width: 10px;
  height: 10px;
  top: 4px;
  left: 4px;
  background: var(--Switch-thumb-background);
}
.excalidraw .Switch:active:before {
  width: 12px;
}
.excalidraw .Switch.toggled:before {
  width: 14px;
  height: 14px;
  left: 22px;
  top: 2px;
  background: var(--Switch-track-background);
}
.excalidraw .Switch.toggled:active:before {
  width: 16px;
  left: 20px;
}
.excalidraw .Switch.disabled:before {
  background: var(--Switch-disabled-color);
}
.excalidraw .Switch.disabled.toggled:before {
  background: var(--Switch-disabled-color);
}
.excalidraw .Switch input {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 12px;
  appearance: none;
  cursor: pointer;
}
.excalidraw .Switch input:disabled {
  cursor: unset;
}

/* components/ImageExportDialog.scss */
.excalidraw {
  --ImageExportModal-preview-border: #d6d6d6;
}
.excalidraw.theme--dark {
  --ImageExportModal-preview-border: #5c5c5c;
}
.excalidraw .ImageExportModal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .ImageExportModal h3 {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  font-size: 1.313rem;
  line-height: 130%;
  padding: 0;
  margin: 0;
}
.excalidraw--mobile.excalidraw .ImageExportModal h3 {
  display: none;
}
.excalidraw .ImageExportModal > h3 {
  display: none;
}
.excalidraw--mobile.excalidraw .ImageExportModal > h3 {
  display: block;
}
.excalidraw--mobile.excalidraw .ImageExportModal {
  flex-direction: column;
  height: calc(100vh - 5rem);
}
.excalidraw .ImageExportModal__preview {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 360px;
  width: 55%;
  margin-right: 1.5rem;
}
.excalidraw--mobile.excalidraw .ImageExportModal__preview {
  max-width: unset;
  margin-right: unset;
  width: 100%;
  height: unset;
  flex-grow: 1;
}
.excalidraw .ImageExportModal__preview__filename > input {
  margin-top: 1rem;
}
.excalidraw .ImageExportModal__preview__canvas {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
  border: 1px solid var(--ImageExportModal-preview-border);
  border-radius: 12px;
  overflow: hidden;
  padding: 1rem;
}
.excalidraw .ImageExportModal__preview__canvas > canvas {
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  filter: none !important;
}
.excalidraw--mobile.excalidraw .ImageExportModal__preview__canvas > canvas {
  max-height: 100%;
}
.excalidraw--mobile.excalidraw .ImageExportModal__preview__canvas {
  margin-top: 24px;
  max-width: unset;
}
.excalidraw .ImageExportModal__settings {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 18px;
}
.excalidraw--mobile.excalidraw .ImageExportModal__settings {
  margin-left: unset;
  margin-top: 1rem;
  flex-direction: row;
  gap: 6px 34px;
  align-content: flex-start;
}
.excalidraw .ImageExportModal__settings__setting {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.excalidraw--mobile.excalidraw .ImageExportModal__settings__setting {
  flex-direction: column;
  align-items: start;
  justify-content: unset;
  height: 52px;
}
.excalidraw .ImageExportModal__settings__setting__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Assistant";
  font-weight: 600;
  font-size: 1rem;
  line-height: 150%;
}
.excalidraw .ImageExportModal__settings__setting__label svg {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}
.excalidraw .ImageExportModal__settings__setting__content {
  display: flex;
  height: 100%;
  align-items: center;
}
.excalidraw .ImageExportModal__settings__buttons {
  flex-grow: 1;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: flex-end;
  align-content: flex-end;
}
.excalidraw--mobile.excalidraw .ImageExportModal__settings__buttons {
  padding-top: 32px;
  flex-basis: 100%;
  justify-content: center;
}

/* components/FilledButton.scss */
@keyframes successStatusAnimation {
  0% {
    transform: scale(0.35);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
.excalidraw .ExcButton {
  --text-color: transparent;
  --border-color: transparent;
  --back-color: transparent;
  color: var(--text-color);
  background-color: var(--back-color);
  border-color: var(--border-color);
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-family);
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw .ExcButton:hover {
  transition: all 150ms ease-out;
}
.excalidraw .ExcButton .Spinner {
  --spinner-color: var(--color-surface-lowest);
}
.excalidraw .ExcButton .ExcButton__statusIcon {
  visibility: visible;
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  animation: successStatusAnimation 0.5s cubic-bezier(0.3, 1, 0.6, 1);
}
.excalidraw .ExcButton.ExcButton--status-loading,
.excalidraw .ExcButton.ExcButton--status-success {
  pointer-events: none;
}
.excalidraw .ExcButton.ExcButton--status-loading .ExcButton__contents,
.excalidraw .ExcButton.ExcButton--status-success .ExcButton__contents {
  visibility: hidden;
}
.excalidraw .ExcButton[disabled] {
  pointer-events: none;
}
.excalidraw .ExcButton,
.excalidraw .ExcButton__contents {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  position: relative;
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-filled {
  --text-color: var(--color-surface-lowest);
  --back-color: var(--color-primary);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-filled .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-filled:hover {
  --back-color: var(--color-brand-hover);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-filled:active {
  --back-color: var(--color-brand-active);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined,
.excalidraw .ExcButton--color-primary.ExcButton--variant-icon {
  --text-color: var(--color-primary);
  --border-color: var(--color-primary);
  --back-color: transparent;
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined .Spinner,
.excalidraw .ExcButton--color-primary.ExcButton--variant-icon .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined:hover,
.excalidraw .ExcButton--color-primary.ExcButton--variant-icon:hover {
  --text-color: var(--color-brand-hover);
  --border-color: var(--color-brand-hover);
}
.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined:active,
.excalidraw .ExcButton--color-primary.ExcButton--variant-icon:active {
  --text-color: var(--color-brand-active);
  --border-color: var(--color-brand-active);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-filled {
  --text-color: var(--color-danger-text);
  --back-color: var(--color-danger-dark);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-filled .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-filled:hover {
  --back-color: var(--color-danger-darker);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-filled:active {
  --back-color: var(--color-danger-darkest);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined,
.excalidraw .ExcButton--color-danger.ExcButton--variant-icon {
  --text-color: var(--color-danger);
  --border-color: var(--color-danger);
  --back-color: transparent;
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined .Spinner,
.excalidraw .ExcButton--color-danger.ExcButton--variant-icon .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined:hover,
.excalidraw .ExcButton--color-danger.ExcButton--variant-icon:hover {
  --text-color: var(--color-danger-darkest);
  --border-color: var(--color-danger-darkest);
}
.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined:active,
.excalidraw .ExcButton--color-danger.ExcButton--variant-icon:active {
  --text-color: var(--color-danger-darker);
  --border-color: var(--color-danger-darker);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-filled {
  --text-color: var(--color-success-text);
  --back-color: var(--color-success);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-filled .Spinner {
  --spinner-color: var(--color-success);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-filled:hover {
  --back-color: var(--color-success-darker);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-filled:active {
  --back-color: var(--color-success-darkest);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-outlined,
.excalidraw .ExcButton--color-success.ExcButton--variant-icon {
  --text-color: var(--color-success-contrast);
  --border-color: var(--color-success-contrast);
  --back-color: transparent;
}
.excalidraw .ExcButton--color-success.ExcButton--variant-outlined .Spinner,
.excalidraw .ExcButton--color-success.ExcButton--variant-icon .Spinner {
  --spinner-color: var(--color-success-contrast);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-outlined:hover,
.excalidraw .ExcButton--color-success.ExcButton--variant-icon:hover {
  --text-color: var(--color-success-contrast-hover);
  --border-color: var(--color-success-contrast-hover);
}
.excalidraw .ExcButton--color-success.ExcButton--variant-outlined:active,
.excalidraw .ExcButton--color-success.ExcButton--variant-icon:active {
  --text-color: var(--color-success-contrast-active);
  --border-color: var(--color-success-contrast-active);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-filled {
  --text-color: var(--island-bg-color);
  --back-color: var(--color-gray-50);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-filled .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-filled:hover {
  --back-color: var(--color-gray-60);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-filled:active {
  --back-color: var(--color-gray-80);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined,
.excalidraw .ExcButton--color-muted.ExcButton--variant-icon {
  --text-color: var(--color-muted-background);
  --border-color: var(--color-muted);
  --back-color: var(--island-bg-color);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined .Spinner,
.excalidraw .ExcButton--color-muted.ExcButton--variant-icon .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined:hover,
.excalidraw .ExcButton--color-muted.ExcButton--variant-icon:hover {
  --text-color: var(--color-muted-background-darker);
  --border-color: var(--color-muted-darker);
}
.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined:active,
.excalidraw .ExcButton--color-muted.ExcButton--variant-icon:active {
  --text-color: var(--color-muted-background-darker);
  --border-color: var(--color-muted-darkest);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-filled {
  --text-color: black;
  --back-color: var(--color-warning-dark);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-filled .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-filled:hover {
  --back-color: var(--color-warning-darker);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-filled:active {
  --back-color: var(--color-warning-darkest);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined,
.excalidraw .ExcButton--color-warning.ExcButton--variant-icon {
  --text-color: var(--color-warning-dark);
  --border-color: var(--color-warning-dark);
  --back-color: var(--input-bg-color);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined .Spinner,
.excalidraw .ExcButton--color-warning.ExcButton--variant-icon .Spinner {
  --spinner-color: var(--text-color);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined:hover,
.excalidraw .ExcButton--color-warning.ExcButton--variant-icon:hover {
  --text-color: var(--color-warning-darker);
  --border-color: var(--color-warning-darker);
}
.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined:active,
.excalidraw .ExcButton--color-warning.ExcButton--variant-icon:active {
  --text-color: var(--color-warning-darkest);
  --border-color: var(--color-warning-darkest);
}
.excalidraw .ExcButton--size-large {
  font-weight: 600;
  font-size: 0.875rem;
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  letter-spacing: 0.4px;
}
.excalidraw .ExcButton--size-large .ExcButton__contents {
  gap: 0.75rem;
}
.excalidraw .ExcButton--size-medium {
  font-weight: 600;
  font-size: 0.75rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  letter-spacing: normal;
}
.excalidraw .ExcButton--size-medium .ExcButton__contents {
  gap: 0.5rem;
}
.excalidraw .ExcButton--variant-icon {
  padding: 0.5rem 0.75rem;
  width: 3rem;
}
.excalidraw .ExcButton--fullWidth {
  width: 100%;
}
.excalidraw .ExcButton__icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* components/FixedSideContainer.scss */
.excalidraw .FixedSideContainer {
  position: absolute;
  pointer-events: none;
}
.excalidraw .FixedSideContainer > * {
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .FixedSideContainer_side_top {
  left: var(--editor-container-padding);
  top: var(--editor-container-padding);
  right: var(--editor-container-padding);
  bottom: var(--editor-container-padding);
}
.excalidraw .FixedSideContainer_side_top.zen-mode {
  right: 42px;
}

/* components/HintViewer.scss */
.excalidraw .HintViewer {
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  top: 100%;
  max-width: 100%;
  width: 100%;
  margin-top: 0.5rem;
  text-align: center;
  color: var(--color-gray-40);
  font-size: 0.75rem;
}
.excalidraw--mobile.excalidraw .HintViewer {
  position: static;
  padding-right: 2rem;
}
.excalidraw .HintViewer > span {
  padding: 0.25rem;
}
.excalidraw.theme--dark .HintViewer {
  color: var(--color-gray-60);
}

/* components/PasteChartDialog.scss */
.excalidraw--mobile.excalidraw .PasteChartDialog .Island {
  display: flex;
  flex-direction: column;
}
.excalidraw .PasteChartDialog .container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.excalidraw--mobile.excalidraw .PasteChartDialog .container {
  flex-direction: column;
  justify-content: center;
}
.excalidraw .PasteChartDialog .ChartPreview {
  margin: 8px;
  text-align: center;
  width: 192px;
  height: 128px;
  border-radius: 2px;
  padding: 1px;
  border: 1px solid #ced4da;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.excalidraw .PasteChartDialog .ChartPreview div {
  display: inline-block;
}
.excalidraw .PasteChartDialog .ChartPreview svg {
  max-height: 120px;
  max-width: 186px;
}
.excalidraw .PasteChartDialog .ChartPreview:hover {
  padding: 0;
  border: 2px solid #339af0;
}

/* components/HelpDialog.scss */
.excalidraw .HelpDialog .Modal__content {
  max-width: 960px;
}
.excalidraw .HelpDialog h3 {
  margin: 1.5rem 0;
  font-weight: 700;
  font-size: 1.125rem;
}
.excalidraw .HelpDialog__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.excalidraw .HelpDialog__btn {
  --background: var(--color-surface-mid);
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  background-color: var(--background);
  padding: 0.625rem 1rem;
  border: 1px solid var(--background);
  border-radius: var(--border-radius-lg);
  color: var(--text-primary-color);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
}
.excalidraw.theme--dark.excalidraw .HelpDialog__btn {
  --background: var(--color-surface-high);
}
.excalidraw.theme--dark.excalidraw .HelpDialog__btn:hover {
  --background: #363541;
}
.excalidraw .HelpDialog__btn:hover {
  --background: var(--color-surface-high);
  text-decoration: none;
}
.excalidraw .HelpDialog__btn:active {
  border-color: var(--color-primary);
}
.excalidraw .HelpDialog__link-icon {
  line-height: 0;
}
.excalidraw .HelpDialog__link-icon svg {
  width: 1rem;
  height: 1rem;
}
.excalidraw .HelpDialog__islands-container {
  display: grid;
  grid-column-gap: 1.5rem;
  grid-row-gap: 2rem;
}
@media screen and (min-width: 1024px) {
  .excalidraw .HelpDialog__islands-container {
    grid-template-columns: 1fr 1fr;
  }
  .excalidraw .HelpDialog__island--tools {
    grid-area: 1/1/2/2;
  }
  .excalidraw .HelpDialog__island--view {
    grid-area: 2/1/3/2;
  }
  .excalidraw .HelpDialog__island--editor {
    grid-area: 1/2/3/3;
  }
}
.excalidraw .HelpDialog__island h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  margin-bottom: 0.625rem;
}
.excalidraw .HelpDialog__island-content {
  border: 1px solid var(--dialog-border-color);
  border-radius: var(--border-radius-lg);
}
.excalidraw .HelpDialog__shortcut {
  border-bottom: 1px solid var(--dialog-border-color);
  padding: 0.375rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  column-gap: 0.5rem;
}
.excalidraw .HelpDialog__shortcut:last-child {
  border-bottom: none;
}
.excalidraw .HelpDialog__key-container {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
  flex-shrink: 0;
}
.excalidraw .HelpDialog__key {
  display: flex;
  box-sizing: border-box;
  font-size: 0.625rem;
  background-color: var(--color-primary-light);
  border-radius: var(--border-radius-md);
  padding: 0.5rem;
  word-break: keep-all;
  align-items: center;
  font-family: inherit;
  line-height: 1;
}

/* components/UserList.scss */
.excalidraw {
  --avatar-size: 1.75rem;
  --avatarList-gap: 0.625rem;
  --userList-padding: var(--space-factor);
  --userlist-hint-bg-color: var(--color-gray-10);
  --userlist-hint-heading-color: var(--color-gray-80);
  --userlist-hint-text-color: var(--color-gray-60);
  --userlist-collaborators-border-color: var(--color-gray-20);
}
.excalidraw .UserList__wrapper {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none !important;
}
.excalidraw .UserList {
  pointer-events: none;
  padding: var(--userList-padding);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--avatarList-gap);
  box-sizing: border-box;
  --max-size: calc( var(--avatar-size) * var(--max-avatars, 2) + var(--avatarList-gap) * (var(--max-avatars, 2) - 1) + var(--userList-padding) * 2 );
  max-height: var(--max-size);
  max-width: var(--max-size);
}
.excalidraw .UserList > * {
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .UserList_mobile {
  padding: 0;
  justify-content: normal;
  margin: 0.5rem 0;
  max-width: none;
  max-height: none;
}
.excalidraw .UserList__more {
  width: var(--avatar-size, 1.5rem);
  height: var(--avatar-size, 1.5rem);
  position: relative;
  border-radius: 100%;
  outline-offset: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  color: var(--color-gray-90);
  flex: 0 0 auto;
  background-color: var(--color-gray-20);
  border: 0 !important;
  font-size: 0.625rem;
  font-weight: 400;
  flex-shrink: 0;
  color: var(--color-gray-100);
  font-weight: bold;
}
.excalidraw .UserList__more:active {
  transform: scale(0.94);
}
.excalidraw .UserList__more-img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.excalidraw .UserList__more::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  border-radius: 100%;
}
.excalidraw .UserList__more.is-followed::before {
  border-color: var(--color-primary-hover);
  box-shadow: 0 0 0 1px var(--color-primary-hover);
}
.excalidraw .UserList__more.is-current-user {
  cursor: auto;
}
.excalidraw .UserList__collaborator-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.excalidraw .UserList__collaborator--avatar-only {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}
.excalidraw .UserList__collaborator--avatar-only .UserList__collaborator-status-icon {
  --size: 14px;
  position: absolute;
  display: flex;
  flex: 0 0 auto;
  bottom: -0.25rem;
  right: -0.25rem;
  width: var(--size);
  height: var(--size);
}
.excalidraw .UserList__collaborator--avatar-only .UserList__collaborator-status-icon svg {
  flex: 0 0 auto;
  width: var(--size);
  height: var(--size);
}
.excalidraw .UserList__collaborator-status-icons {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 2.25rem;
  gap: 0.25rem;
  justify-content: flex-end;
  display: flex;
}
.excalidraw .UserList__collaborator.is-muted .UserList__collaborator-status-icon-microphone-muted {
  color: var(--color-danger);
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
}
.excalidraw .UserList__collaborator-status-icon-speaking-indicator {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 1rem;
  padding: 0 3px;
  box-sizing: border-box;
}
.excalidraw .UserList__collaborator-status-icon-speaking-indicator div {
  width: 0.125rem;
  height: 0.4rem;
  background-color: #a2f1a6;
}
.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(1) {
  animation: speaking-indicator-anim 1s -0.45s ease-in-out infinite;
}
.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(2) {
  animation: speaking-indicator-anim 1s -0.9s ease-in-out infinite;
}
.excalidraw .UserList__collaborator-status-icon-speaking-indicator div:nth-of-type(3) {
  animation: speaking-indicator-anim 1s -0.15s ease-in-out infinite;
}
@keyframes speaking-indicator-anim {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
}
.excalidraw.theme--dark {
  --userlist-hint-bg-color: var(--color-gray-90);
  --userlist-hint-heading-color: var(--color-gray-30);
  --userlist-hint-text-color: var(--color-gray-40);
  --userlist-collaborators-border-color: var(--color-gray-80);
}
.excalidraw .UserList__collaborators {
  top: auto;
  max-height: 50vh;
}

/* components/Card.scss */
.excalidraw .Card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 290px;
  margin: 1em;
  text-align: center;
}
.excalidraw .Card .Card-icon {
  font-size: 2.6em;
  display: flex;
  flex: 0 0 auto;
  padding: 1.4rem;
  border-radius: 50%;
  background: var(--card-color);
  color: #ffffff;
}
.excalidraw .Card .Card-icon svg {
  width: 2.8rem;
  height: 2.8rem;
}
.excalidraw .Card .Card-details {
  font-size: 0.96em;
  min-height: 90px;
  padding: 0 1em;
  margin-bottom: auto;
}
.excalidraw .Card .Card-button.ToolIcon_type_button {
  height: 2.5rem;
  margin-top: 1em;
  margin-bottom: 0.3em;
  background-color: var(--card-color);
}
.excalidraw .Card .Card-button.ToolIcon_type_button:hover {
  background-color: var(--card-color-darker);
}
.excalidraw .Card .Card-button.ToolIcon_type_button:active {
  background-color: var(--card-color-darkest);
}
.excalidraw .Card .Card-button.ToolIcon_type_button .ToolIcon__label {
  color: #ffffff;
}
.excalidraw .Card .Card-button.ToolIcon_type_button .Spinner {
  --spinner-color: #fff;
}

/* components/ExportDialog.scss */
.excalidraw .ExportDialog__preview {
  --preview-padding: calc(var(--space-factor) * 4);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
  text-align: center;
  padding: var(--preview-padding);
  margin-bottom: calc(var(--space-factor) * 3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.excalidraw .ExportDialog__preview canvas {
  max-width: calc(100% - var(--preview-padding) * 2);
  max-height: 25rem;
}
.excalidraw.theme--dark .ExportDialog__preview canvas {
  filter: none;
}
.excalidraw .ExportDialog__actions {
  width: 100%;
  display: flex;
  grid-gap: calc(var(--space-factor) * 2);
  align-items: top;
  justify-content: space-between;
}
.excalidraw--mobile.excalidraw .ExportDialog {
  display: flex;
  flex-direction: column;
}
.excalidraw--mobile.excalidraw .ExportDialog__actions {
  flex-direction: column;
  align-items: center;
}
.excalidraw--mobile.excalidraw .ExportDialog__actions > * {
  margin-bottom: calc(var(--space-factor) * 3);
}
.excalidraw--mobile.excalidraw .ExportDialog__preview canvas {
  max-height: 30vh;
}
.excalidraw--mobile.excalidraw .ExportDialog__dialog,
.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
  height: 100%;
  box-sizing: border-box;
}
.excalidraw--mobile.excalidraw .ExportDialog__dialog .Island {
  overflow-y: auto;
}
.excalidraw .ExportDialog--json .ExportDialog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;
  row-gap: 2em;
}
@media (max-width: 460px) {
  .excalidraw .ExportDialog--json .ExportDialog-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .excalidraw .ExportDialog--json .ExportDialog-cards .Card-details {
    min-height: 40px;
  }
}
.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName {
  width: fit-content;
  margin: 1em auto;
  align-items: flex-start;
  flex-direction: column;
}
.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName .TextInput {
  width: auto;
}
.excalidraw .ExportDialog--json .ExportDialog-cards .ProjectName-label {
  margin: 0.625em 0;
  font-weight: bold;
}
.excalidraw button.ExportDialog-imageExportButton {
  border: 0;
  width: 5rem;
  height: 5rem;
  margin: 0 0.2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: var(--button-color);
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.28), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
  font-family: Cascadia;
  font-size: 1.8em;
  color: #ffffff;
}
.excalidraw button.ExportDialog-imageExportButton:hover {
  background-color: var(--button-color-darker);
}
.excalidraw button.ExportDialog-imageExportButton:active {
  background-color: var(--button-color-darkest);
  box-shadow: none;
}
.excalidraw button.ExportDialog-imageExportButton svg {
  width: 0.9em;
}

/* components/Sidebar/SidebarTrigger.scss */
.excalidraw .sidebar-trigger {
  justify-content: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  border: none;
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
  background-color: var(--color-surface-low);
  width: auto;
  height: var(--lg-button-size);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 0;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
}
.excalidraw .sidebar-trigger svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .sidebar-trigger:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .sidebar-trigger:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .sidebar-trigger.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .sidebar-trigger.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .sidebar-trigger.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw .sidebar-trigger:active {
  box-shadow: 0 0 0 1px var(--color-brand-active);
}
.excalidraw .sidebar-trigger svg {
  width: var(--lg-icon-size);
  height: var(--lg-icon-size);
}
.excalidraw .sidebar-trigger__label-element {
  align-self: flex-start;
}
.excalidraw .default-sidebar-trigger .sidebar-trigger__label {
  display: block;
  white-space: nowrap;
}
.excalidraw.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
  display: none;
}

/* components/Sidebar/Sidebar.scss */
.excalidraw .sidebar {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--sidebar-bg-color);
  box-shadow: var(--sidebar-shadow);
  pointer-events: var(--ui-pointerEvents);
  overflow: hidden;
  border-radius: 0;
  width: calc(var(--right-sidebar-width) - var(--space-factor) * 2);
  border-left: 1px solid var(--sidebar-border-color);
}
:root[dir=rtl] .excalidraw .sidebar {
  left: 0;
  right: auto;
}
.excalidraw .sidebar--docked {
  box-shadow: none;
}
:root[dir=rtl] .excalidraw .sidebar {
  border-right: 1px solid var(--sidebar-border-color);
  border-left: 0;
}
.excalidraw .sidebar__header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 0.75rem;
  position: relative;
}
.excalidraw .sidebar__header::after {
  content: "";
  width: calc(100% - 1.5rem);
  height: 1px;
  background: var(--sidebar-border-color);
  position: absolute;
  bottom: -1px;
}
.excalidraw .sidebar__header__buttons {
  gap: 0;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.excalidraw .sidebar__header__buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  --button-bg: transparent;
  border: 0 !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
  padding: 0;
}
.excalidraw .sidebar__header__buttons button svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .sidebar__header__buttons button:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .sidebar__header__buttons button:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .sidebar__header__buttons button.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .sidebar__header__buttons button.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .sidebar__header__buttons button.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw .sidebar__header__buttons button svg {
  width: var(--lg-icon-size);
  height: var(--lg-icon-size);
}
.excalidraw .sidebar__header__buttons button:hover {
  background: var(--button-hover-bg, var(--island-bg-color));
}
.excalidraw .sidebar__header__buttons .sidebar__dock.selected svg {
  stroke: var(--color-primary);
  fill: var(--color-primary);
}
.excalidraw .sidebar-tabs-root {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem 0;
}
.excalidraw .sidebar-tabs-root [role=tabpanel] {
  flex: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  outline: none;
}
.excalidraw .sidebar-tabs-root [role=tabpanel][data-state=inactive] {
  display: none !important;
}
.excalidraw .sidebar-tabs-root [role=tablist] {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.excalidraw .sidebar-tabs-root > .sidebar__header {
  padding-top: 0;
  padding-bottom: 1rem;
}
.excalidraw .sidebar-tab-trigger {
  --button-width: auto;
  --button-bg: transparent;
  --button-hover-bg: transparent;
  --button-active-bg: var(--color-primary);
  --button-hover-color: var(--color-primary);
  --button-hover-border: var(--color-primary);
}
.excalidraw .sidebar-tab-trigger[data-state=active] {
  --button-bg: var(--color-primary);
  --button-hover-bg: var(--color-primary-darker);
  --button-hover-color: var(--color-icon-white);
  --button-border: var(--color-primary);
  color: var(--color-icon-white);
}
.excalidraw .default-sidebar {
  display: flex;
  flex-direction: column;
}
.excalidraw .default-sidebar .sidebar-triggers {
  display: flex;
  gap: 0;
  padding: 2px;
  margin-top: -3px;
  margin-bottom: -3px;
  border: 1px solid var(--sidebar-border-color);
  background: var(--default-bg-color);
  border-radius: 0.625rem;
}
.excalidraw .default-sidebar .sidebar-triggers .sidebar-tab-trigger {
  height: var(--lg-button-size);
  width: var(--lg-button-size);
  border: none;
}

/* components/main-menu/DefaultItems.scss */
.excalidraw .ActiveFile .ActiveFile__fileName {
  display: flex;
  align-items: center;
}
.excalidraw .ActiveFile .ActiveFile__fileName span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 9.3em;
}
.excalidraw .ActiveFile .ActiveFile__fileName svg {
  width: 1.15em;
  margin-inline-end: 0.3em;
  transform: scaleY(0.9);
}

/* components/OverwriteConfirm/OverwriteConfirm.scss */
.excalidraw .OverwriteConfirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  isolation: isolate;
}
.excalidraw .OverwriteConfirm h3 {
  margin: 0;
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 130%;
  align-self: flex-start;
  color: var(--text-primary-color);
}
.excalidraw .OverwriteConfirm__Description {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 2.5rem;
  background: var(--color-danger-background);
  border-radius: 0.5rem;
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  color: var(--color-danger-color);
}
.excalidraw--mobile.excalidraw .OverwriteConfirm__Description {
  flex-direction: column;
  text-align: center;
}
.excalidraw .OverwriteConfirm__Description__spacer {
  flex-grow: 1;
}
.excalidraw .OverwriteConfirm__Description__icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.5rem;
  background: var(--color-danger-icon-background);
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.75rem;
}
.excalidraw .OverwriteConfirm__Description__icon svg {
  color: var(--color-danger-icon-color);
  width: 1.5rem;
  height: 1.5rem;
}
.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning {
  background: var(--color-warning-background);
  color: var(--color-warning-color);
}
.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning .OverwriteConfirm__Description__icon {
  background: var(--color-warning-icon-background);
  flex: 0 0 auto;
}
.excalidraw .OverwriteConfirm__Description.OverwriteConfirm__Description--color-warning .OverwriteConfirm__Description__icon svg {
  color: var(--color-warning-icon-color);
}
.excalidraw .OverwriteConfirm__Actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-items: stretch;
  justify-content: center;
  gap: 1.5rem;
}
.excalidraw--mobile.excalidraw .OverwriteConfirm__Actions {
  flex-direction: column;
}
.excalidraw .OverwriteConfirm__Actions__Action {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  gap: 0.75rem;
  flex-basis: 50%;
  flex-grow: 0;
}
.excalidraw .OverwriteConfirm__Actions__Action__content {
  height: 100%;
  font-size: 0.875rem;
  text-align: center;
}
.excalidraw .OverwriteConfirm__Actions__Action h4 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 130%;
  margin: 0;
  color: var(--text-primary-color);
}

/* components/SearchMenu.scss */
.excalidraw .layer-ui__search {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0 0;
}
.excalidraw .layer-ui__search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
}
.excalidraw .layer-ui__search-header .ExcTextField {
  flex: 1 0 auto;
}
.excalidraw .layer-ui__search-header .ExcTextField__input {
  background-color: #f5f5f9;
  border-radius: var(--border-radius-md);
  border: 0;
}
.excalidraw.theme--dark.excalidraw .layer-ui__search-header .ExcTextField__input {
  background-color: #31303b;
}
.excalidraw .layer-ui__search-header .ExcTextField__input input::placeholder {
  font-size: 0.9rem;
}
.excalidraw .layer-ui__search-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 0 8px;
  margin: 0 0.75rem 0.25rem 0.75rem;
  font-size: 0.8em;
}
.excalidraw .layer-ui__search-count .result-nav {
  display: flex;
}
.excalidraw .layer-ui__search-count .result-nav .result-nav-btn {
  width: 36px;
  height: 36px;
  --button-border: transparent;
}
.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:active {
  background-color: var(--color-surface-high);
}
.excalidraw .layer-ui__search-count .result-nav .result-nav-btn:first-child {
  margin-right: 4px;
}
.excalidraw .layer-ui__search-result-container {
  overflow-y: auto;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.excalidraw .layer-ui__result-item {
  display: flex;
  align-items: center;
  min-height: 2rem;
  flex: 0 0 auto;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  margin: 0 0.75rem;
  border-radius: var(--border-radius-md);
}
.excalidraw .layer-ui__result-item .text-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.75rem;
}
.excalidraw .layer-ui__result-item .preview-text {
  flex: 1;
  max-height: 48px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.excalidraw .layer-ui__result-item:hover {
  background-color: var(--color-surface-high);
}
.excalidraw .layer-ui__result-item:active {
  border-color: var(--color-primary);
}
.excalidraw .layer-ui__result-item.active {
  background-color: var(--color-surface-high);
}

/* components/TTDDialog/MermaidToExcalidraw.scss */
.excalidraw .dialog-mermaid-title {
  margin-block: 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  padding-inline: 2.5rem;
}

/* components/TTDDialog/TTDDialog.scss */
.excalidraw .Modal.Dialog.ttd-dialog {
  padding: 1.25rem;
}
.excalidraw .Modal.Dialog.ttd-dialog.Dialog--fullscreen {
  margin-top: 0;
}
.excalidraw .Modal.Dialog.ttd-dialog .Island {
  padding-inline: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-shadow: none;
}
.excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
  height: auto;
  max-height: 100%;
}
@media screen and (min-width: 861px) {
  .excalidraw .Modal.Dialog.ttd-dialog .Modal__content {
    max-height: 750px;
    height: 100%;
  }
}
.excalidraw .Modal.Dialog.ttd-dialog .Dialog__content {
  flex: 1 1 auto;
}
.excalidraw .ttd-dialog-desc {
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.excalidraw .ttd-dialog-tabs-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.excalidraw .ttd-dialog-tab-trigger {
  color: var(--color-on-surface);
  font-size: 0.875rem;
  margin: 0;
  padding: 0 1rem;
  background-color: transparent;
  border: 0;
  height: 2.875rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.4px;
}
.excalidraw .ttd-dialog-tab-trigger[data-state=active] {
  border-bottom: 2px solid var(--color-primary);
}
.excalidraw .ttd-dialog-triggers {
  border-bottom: 1px solid var(--color-surface-high);
  margin-bottom: 1.5rem;
  padding-inline: 2.5rem;
}
.excalidraw .ttd-dialog-content {
  padding-inline: 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.excalidraw .ttd-dialog-content[hidden] {
  display: none;
}
.excalidraw .ttd-dialog-input {
  width: auto;
  height: 10rem;
  resize: none;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--dialog-border-color);
  white-space: pre-wrap;
  padding: 0.85rem;
  box-sizing: border-box;
  font-family: monospace;
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-input {
    width: 100%;
    height: 100%;
  }
}
.excalidraw .ttd-dialog-output-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  box-sizing: border-box;
  flex-grow: 1;
  position: relative;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==) left center;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--dialog-border-color);
  height: 400px;
  width: auto;
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-output-wrapper {
    width: 100%;
    height: 200px;
  }
}
.excalidraw .ttd-dialog-output-wrapper canvas {
  max-width: 100%;
  max-height: 100%;
}
.excalidraw .ttd-dialog-output-canvas-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.excalidraw .ttd-dialog-output-error {
  color: red;
  font-weight: 700;
  font-size: 30px;
  word-break: break-word;
  overflow: auto;
  max-height: 100%;
  height: 100%;
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 10;
}
.excalidraw .ttd-dialog-output-error p {
  font-weight: 500;
  font-family: Cascadia;
  text-align: left;
  white-space: pre-wrap;
  font-size: 0.875rem;
  padding: 0 10px;
}
.excalidraw .ttd-dialog-panels {
  height: 100%;
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.excalidraw .ttd-dialog-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.excalidraw .ttd-dialog-panel__header {
  display: flex;
  margin: 0px 4px 4px 4px;
  align-items: center;
  gap: 1rem;
}
.excalidraw .ttd-dialog-panel__header label {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.excalidraw .ttd-dialog-panel:first-child .ttd-dialog-panel-button-container:not(.invisible) {
  margin-bottom: 4rem;
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-panel .ttd-dialog-panel-button-container:not(.invisible) {
    margin-bottom: 0.5rem !important;
  }
}
.excalidraw .ttd-dialog-panel textarea {
  height: 100%;
  resize: none;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--dialog-border-color);
  white-space: pre-wrap;
  padding: 0.85rem;
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
}
@media screen and (max-width: 861px) {
  .excalidraw .ttd-dialog-panel textarea {
    width: auto;
    height: 10rem;
  }
}
.excalidraw .ttd-dialog-panel-button-container {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button {
  display: none;
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-panel-button-container.invisible .ttd-dialog-panel-button {
    display: block;
    visibility: hidden;
  }
}
.excalidraw .ttd-dialog-panel-button {
  position: relative;
}
.excalidraw .ttd-dialog-panel-button.excalidraw-button {
  font-family: inherit;
  font-weight: 600;
  height: 2.5rem;
  font-size: 12px;
  color: #ffffff;
  background-color: var(--color-primary);
  width: 100%;
}
.excalidraw .ttd-dialog-panel-button.excalidraw-button:hover {
  background-color: var(--color-primary-darker);
}
.excalidraw .ttd-dialog-panel-button.excalidraw-button:active {
  background-color: var(--color-primary-darkest);
}
.excalidraw .ttd-dialog-panel-button.excalidraw-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.excalidraw .ttd-dialog-panel-button.excalidraw-button:disabled:hover {
  background-color: var(--color-primary);
}
@media screen and (min-width: 861px) {
  .excalidraw .ttd-dialog-panel-button.excalidraw-button {
    width: auto;
    min-width: 7.5rem;
  }
}
.excalidraw.theme--dark.excalidraw .ttd-dialog-panel-button.excalidraw-button {
  color: var(--color-gray-100);
}
.excalidraw .ttd-dialog-panel-button div {
  display: contents;
}
.excalidraw .ttd-dialog-panel-button div.invisible {
  visibility: hidden;
}
.excalidraw .ttd-dialog-panel-button div.Spinner {
  display: flex !important;
  position: absolute;
  inset: 0;
  --spinner-color: white;
}
.excalidraw.theme--dark.excalidraw .ttd-dialog-panel-button div.Spinner {
  --spinner-color: var(--color-gray-100);
}
.excalidraw .ttd-dialog-panel-button div span {
  padding-left: 0.5rem;
  display: flex;
}
.excalidraw .ttd-dialog-submit-shortcut {
  margin-inline-start: 0.5rem;
  font-size: 0.625rem;
  opacity: 0.6;
  display: flex;
  gap: 0.125rem;
}
.excalidraw .ttd-dialog-submit-shortcut__key {
  border: 1px solid gray;
  padding: 2px 3px;
  border-radius: 4px;
}

/* components/Stats/DragInput.scss */
.excalidraw .drag-input-container {
  display: flex;
  width: 100%;
}
.excalidraw .drag-input-container:focus-within {
  box-shadow: 0 0 0 1px var(--color-primary-darkest);
  border-radius: var(--border-radius-md);
}
.excalidraw .disabled {
  opacity: 0.5;
  pointer-events: none;
}
.excalidraw .drag-input-label {
  flex-shrink: 0;
  border: 1px solid var(--default-border-color);
  border-right: 0;
  padding: 0 0.5rem 0 0.75rem;
  min-width: 1rem;
  height: 2rem;
  box-sizing: border-box;
  color: var(--popup-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
:root[dir=ltr] .excalidraw .drag-input-label {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
}
:root[dir=rtl] .excalidraw .drag-input-label {
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  border-right: 1px solid var(--default-border-color);
  border-left: 0;
}
.excalidraw .drag-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  font-size: 0.875rem;
  font-family: inherit;
  background-color: transparent;
  color: var(--text-primary-color);
  border: 0;
  outline: none;
  height: 2rem;
  border: 1px solid var(--default-border-color);
  border-left: 0;
  letter-spacing: 0.4px;
  padding: 0.5rem;
  padding-left: 0.25rem;
  appearance: none;
}
:root[dir=ltr] .excalidraw .drag-input {
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}
:root[dir=rtl] .excalidraw .drag-input {
  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  border-left: 1px solid var(--default-border-color);
  border-right: 0;
}
.excalidraw .drag-input:focus-visible {
  box-shadow: none;
}

/* components/Stats/Stats.scss */
.exc-stats {
  width: 204px;
  position: absolute;
  top: 60px;
  font-size: 12px;
  z-index: var(--zIndex-layerUI);
  pointer-events: var(--ui-pointerEvents);
}
:root[dir=rtl] .exc-stats {
  left: 12px;
  right: initial;
}
.exc-stats h2 {
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  font-weight: bold;
}
.exc-stats h3 {
  white-space: nowrap;
  font-size: 1.17em;
  margin: 0;
  font-weight: bold;
}
.exc-stats__rows {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.exc-stats__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: grid;
  gap: 4px;
}
.exc-stats__row div + div {
  text-align: right;
}
.exc-stats__row--heading {
  text-align: center;
  font-weight: bold;
  margin: 0.25rem 0;
}
.exc-stats .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.exc-stats .title h2 {
  margin: 0;
}
.exc-stats .close {
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.exc-stats .close svg {
  width: 100%;
  height: 100%;
}

/* components/ElementLinkDialog.scss */
.excalidraw .ElementLinkDialog {
  position: absolute;
  top: var(--editor-container-padding);
  left: var(--editor-container-padding);
  z-index: var(--zIndex-modal);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-island);
  background-color: var(--island-bg-color);
}
.excalidraw--mobile.excalidraw .ElementLinkDialog {
  left: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: calc(100% - 1rem);
  box-sizing: border-box;
  z-index: 5;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__header {
  margin-bottom: 1.5rem;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__header h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header h2 {
  font-size: 1.25rem;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__header p {
  margin: 0;
}
.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header p {
  font-size: 0.875rem;
}
.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__header {
  margin-bottom: 1rem;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__input {
  display: flex;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__input-field {
  flex: 1;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove {
  color: #c92a2a;
  margin-left: 1rem;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove .ToolIcon__icon {
  width: 2rem;
  height: 2rem;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__input .ElementLinkDialog__remove .ToolIcon__icon svg {
  color: #fa5252;
}
.excalidraw .ElementLinkDialog .ElementLinkDialog__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.excalidraw--mobile.excalidraw .ElementLinkDialog .ElementLinkDialog__actions {
  font-size: 0.875rem;
  margin-top: 1rem;
}

/* components/LayerUI.scss */
.excalidraw .layer-ui__wrapper.animate {
  transition: width 0.1s ease-in-out;
}
.excalidraw .layer-ui__wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--zIndex-layerUI);
}
.excalidraw .layer-ui__wrapper__top-right {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 0.75rem;
  pointer-events: none !important;
}
.excalidraw .layer-ui__wrapper__top-right > * {
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .layer-ui__wrapper__footer {
  width: 100%;
}
.excalidraw .layer-ui__wrapper__footer-right {
  z-index: 100;
  display: flex;
}
.excalidraw .layer-ui__wrapper .zen-mode-transition {
  transition: transform 0.5s ease-in-out;
}
:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
  transform: translate(-999px, 0);
}
:root[dir=ltr] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
  transform: translate(999px, 0);
}
:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-left {
  transform: translate(999px, 0);
}
:root[dir=rtl] .excalidraw .layer-ui__wrapper .zen-mode-transition.transition-right {
  transform: translate(-999px, 0);
}
.excalidraw .layer-ui__wrapper .zen-mode-transition.layer-ui__wrapper__footer-left--transition-bottom {
  transform: translate(0, 92px);
}
.excalidraw .layer-ui__wrapper .disable-zen-mode {
  padding: 10px;
  position: absolute;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0s, opacity 0.5s;
  font-family: var(--ui-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--default-border-color);
  background-color: var(--island-bg-color);
  color: var(--text-primary-color);
}
[dir=ltr] .excalidraw .layer-ui__wrapper .disable-zen-mode {
  right: 1rem;
}
[dir=rtl] .excalidraw .layer-ui__wrapper .disable-zen-mode {
  left: 1rem;
}
.excalidraw .layer-ui__wrapper .disable-zen-mode:hover {
  background-color: var(--button-hover-bg);
}
.excalidraw .layer-ui__wrapper .disable-zen-mode:active {
  border-color: var(--color-primary);
}
.excalidraw .layer-ui__wrapper .disable-zen-mode--visible {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 300ms, opacity 0.5s;
  transition-delay: 0.8s;
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-left > *,
.excalidraw .layer-ui__wrapper .footer-center > *,
.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right > * {
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .layer-ui__wrapper .layer-ui__wrapper__footer-right {
  margin-top: auto;
  margin-bottom: auto;
}

/* components/Toolbar.scss */
.excalidraw .App-toolbar.zen-mode .ToolIcon__keybinding,
.excalidraw .App-toolbar.zen-mode .HintViewer {
  display: none;
}
.excalidraw .App-toolbar__divider {
  width: 1px;
  height: 1.5rem;
  align-self: center;
  background-color: var(--default-border-color);
  margin: 0 0.25rem;
}
.excalidraw--mobile.excalidraw .App-toolbar__divider {
  margin: 0;
}
.excalidraw .App-toolbar__extra-tools-trigger {
  box-shadow: none;
  border: 0;
  background-color: transparent;
}
.excalidraw .App-toolbar__extra-tools-trigger:active {
  background-color: var(--button-hover-bg);
  box-shadow: 0 0 0 1px var(--button-active-border, var(--color-primary-darkest)) inset;
}
.excalidraw .App-toolbar__extra-tools-trigger--selected,
.excalidraw .App-toolbar__extra-tools-trigger--selected:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.excalidraw .App-toolbar__extra-tools-dropdown {
  margin-top: 0.375rem;
  right: 0;
  min-width: 11.875rem;
  z-index: 1;
}

/* components/Toast.scss */
.excalidraw .Toast {
  animation: fade-in 0.5s;
  background-color: var(--button-gray-1);
  border-radius: 4px;
  bottom: 10px;
  box-sizing: border-box;
  cursor: default;
  left: 50%;
  margin-left: -150px;
  padding: 4px 0;
  position: absolute;
  text-align: center;
  width: 300px;
  z-index: 999999;
}
.excalidraw .Toast .Toast__message {
  padding: 0 1.6rem;
  color: var(--popup-text-color);
  white-space: pre-wrap;
}
.excalidraw .Toast .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.4rem;
}
.excalidraw .Toast .close .ToolIcon__icon {
  width: 1.2rem;
  height: 1.2rem;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* components/SVGLayer.scss */
.excalidraw .SVGLayer {
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--zIndex-svgLayer);
}
.excalidraw .SVGLayer svg {
  image-rendering: auto;
  overflow: visible;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* element/ElementCanvasButtons.scss */
.excalidraw .excalidraw-canvas-buttons {
  position: absolute;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.3);
  z-index: var(--zIndex-canvasButtons);
  background: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* components/FollowMode/FollowMode.scss */
.excalidraw .follow-mode {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: 2px solid var(--color-primary-hover);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.excalidraw .follow-mode__badge {
  background-color: var(--color-primary-hover);
  color: var(--color-primary-light);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  pointer-events: all;
  font-size: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.excalidraw .follow-mode__badge__label {
  display: flex;
  white-space: pre-wrap;
  line-height: 1;
}
.excalidraw .follow-mode__badge__username {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.excalidraw .follow-mode__disconnect-btn {
  all: unset;
  cursor: pointer;
  border-radius: 0.25rem;
}
.excalidraw .follow-mode__disconnect-btn:hover {
  background-color: var(--color-primary-darker);
}
.excalidraw .follow-mode__disconnect-btn:active {
  background-color: var(--color-primary-darkest);
}
.excalidraw .follow-mode__disconnect-btn svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

/* css/app.scss */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
}
.LoadingMessage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.LoadingMessage .Spinner {
  font-size: 2.8em;
}
.LoadingMessage .LoadingMessage-text {
  margin-top: 1em;
  font-size: 0.8em;
}
.LoadingMessage--dark {
  background-color: #121212;
  color: #ced4da;
}

/* css/styles.scss */
.excalidraw {
  --theme-filter: none;
  --button-destructive-bg-color: #ffe3e3;
  --button-destructive-color: #c92a2a;
  --button-gray-1: #e9ecef;
  --button-gray-2: #ced4da;
  --button-gray-3: #adb5bd;
  --button-special-active-bg-color: #ebfbee;
  --dialog-border-color: var(--color-gray-20);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #a5d8ff;
  --icon-fill-color: var(--color-on-surface);
  --icon-green-fill-color: #2b8a3e;
  --default-bg-color: #ffffff;
  --input-bg-color: #ffffff;
  --input-border-color: #ced4da;
  --input-hover-bg-color: #f1f3f5;
  --input-label-color: #495057;
  --island-bg-color: #ffffff;
  --keybinding-color: var(--color-gray-40);
  --link-color: #1c7ed6;
  --overlay-bg-color: rgba(255, 255, 255, 0.88);
  --popup-bg-color: var(--island-bg-color);
  --popup-secondary-bg-color: #f1f3f5;
  --popup-text-color: #000000;
  --popup-text-inverted-color: #ffffff;
  --select-highlight-color: #339af0;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --button-hover-bg: var(--color-surface-high);
  --button-active-bg: var(--color-surface-high);
  --button-active-border: var(--color-brand-active);
  --default-border-color: var(--color-surface-high);
  --default-button-size: 2rem;
  --default-icon-size: 1rem;
  --lg-button-size: 2.25rem;
  --lg-icon-size: 1rem;
  --editor-container-padding: 1rem;
  --scrollbar-thumb: var(--button-gray-2);
  --scrollbar-thumb-hover: var(--button-gray-3);
  --color-slider-track: hsl(240, 100%, 90%);
  --color-slider-thumb: var(--color-gray-80);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-20);
  --sidebar-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --sidebar-border-color: var(--color-surface-high);
  --sidebar-bg-color: var(--island-bg-color);
  --library-dropdown-shadow:
    0px 15px 6px rgba(0, 0, 0, 0.01),
    0px 8px 5px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.09),
    0px 1px 2px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(0, 0, 0, 0.1);
  --space-factor: 0.25rem;
  --text-primary-color: var(--color-on-surface);
  --color-selection: #6965db;
  --color-icon-white: #ffffff;
  --color-primary: #6965db;
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e3e2fe;
  --color-primary-light-darker: #d7d5ff;
  --color-primary-hover: #5753d0;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #ebebeb;
  --color-gray-30: #d6d6d6;
  --color-gray-40: #b8b8b8;
  --color-gray-50: #999999;
  --color-gray-60: #7a7a7a;
  --color-gray-70: #5c5c5c;
  --color-gray-80: #3d3d3d;
  --color-gray-85: #242424;
  --color-gray-90: #1e1e1e;
  --color-gray-100: #121212;
  --color-disabled: var(--color-gray-40);
  --color-warning: #fceeca;
  --color-warning-dark: #f5c354;
  --color-warning-darker: #f3ab2c;
  --color-warning-darkest: #ec8b14;
  --color-text-warning: var(--text-primary-color);
  --color-danger: #db6965;
  --color-danger-dark: #db6965;
  --color-danger-darker: #d65550;
  --color-danger-darkest: #d1413c;
  --color-danger-text: black;
  --color-danger-background: #fff0f0;
  --color-danger-icon-background: #ffdad6;
  --color-danger-color: #700000;
  --color-danger-icon-color: #700000;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--text-primary-color);
  --color-warning-icon-color: var(--text-primary-color);
  --color-muted: var(--color-gray-30);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-100);
  --color-muted-background: var(--color-gray-80);
  --color-muted-background-darker: var(--color-gray-100);
  --color-promo: var(--color-primary);
  --color-success: #cafccc;
  --color-success-darker: #bafabc;
  --color-success-darkest: #a5eba8;
  --color-success-text: #268029;
  --color-success-contrast: #65bb6a;
  --color-success-contrast-hover: #6bcf70;
  --color-success-contrast-active: #6edf74;
  --color-logo-icon: var(--color-primary);
  --color-logo-text: #190064;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --color-surface-high: #f1f0ff;
  --color-surface-mid: #f2f2f7;
  --color-surface-low: #ececf4;
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1b1b1f;
  --color-brand-hover: #5753d0;
  --color-on-primary-container: #030064;
  --color-brand-active: #4440bf;
  --color-border-outline: #767680;
  --color-border-outline-variant: #c5c5d0;
  --color-surface-primary-container: #e0dfff;
  --color-badge: #0b6513;
  --background-color-badge: #d3ffd2;
}
@media screen and (min-device-width: 1921px) {
  .excalidraw {
    --lg-button-size: 2.5rem;
    --lg-icon-size: 1.25rem;
    --default-button-size: 2.25rem;
    --default-icon-size: 1.25rem;
  }
}
.excalidraw.theme--dark.theme--dark-background-none {
  background: none;
}
.excalidraw.theme--dark {
  --theme-filter: invert(93%) hue-rotate(180deg);
  --button-destructive-bg-color: #5a0000;
  --button-destructive-color: #ffa8a8;
  --button-gray-1: #363636;
  --button-gray-2: #272727;
  --button-gray-3: #222;
  --button-special-active-bg-color: #204624;
  --dialog-border-color: var(--color-gray-80);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #228be6;
  --icon-green-fill-color: #69db7c;
  --default-bg-color: #121212;
  --input-bg-color: #121212;
  --input-border-color: #2e2e2e;
  --input-hover-bg-color: #181818;
  --input-label-color: #e9ecef;
  --island-bg-color: #232329;
  --keybinding-color: var(--color-gray-60);
  --link-color: #4dabf7;
  --overlay-bg-color: rgba(52, 58, 64, 0.12);
  --popup-secondary-bg-color: #222;
  --popup-text-color: #ced4da;
  --popup-text-inverted-color: #2c2c2c;
  --select-highlight-color: #4dabf7;
  --shadow-island:
    0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
  --modal-shadow:
    0px 100px 80px rgba(0, 0, 0, 0.07),
    0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
    0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
  --avatar-border-color: var(--color-gray-85);
  --scrollbar-thumb: #343a40;
  --scrollbar-thumb-hover: #495057;
  --color-slider-track: hsl(244, 23%, 39%);
  --color-selection: #3530c4;
  --color-icon-white: var(--color-gray-90);
  --color-primary: #a8a5ff;
  --color-primary-darker: #b2aeff;
  --color-primary-darkest: #beb9ff;
  --color-primary-light: #4f4d6f;
  --color-primary-light-darker: #43415e;
  --color-primary-hover: #bbb8ff;
  --color-disabled: var(--color-gray-70);
  --color-text-warning: var(--color-gray-80);
  --color-danger: #ffa8a5;
  --color-danger-dark: #672120;
  --color-danger-darker: #8f2625;
  --color-danger-darkest: #ac2b29;
  --color-danger-text: #fbcbcc;
  --color-danger-background: #fbcbcc;
  --color-danger-icon-background: #672120;
  --color-danger-color: #261919;
  --color-danger-icon-color: #fbcbcc;
  --color-warning-background: var(--color-warning);
  --color-warning-icon-background: var(--color-warning-dark);
  --color-warning-color: var(--color-gray-80);
  --color-warning-icon-color: var(--color-gray-80);
  --color-muted: var(--color-gray-80);
  --color-muted-darker: var(--color-gray-60);
  --color-muted-darkest: var(--color-gray-20);
  --color-muted-background: var(--color-gray-40);
  --color-muted-background-darker: var(--color-gray-20);
  --color-logo-text: #e2dfff;
  --color-surface-high: hsl(245, 10%, 21%);
  --color-surface-low: hsl(240, 8%, 15%);
  --color-surface-mid: hsl(240 6% 10%);
  --color-surface-lowest: hsl(0, 0%, 7%);
  --color-on-surface: #e3e3e8;
  --color-brand-hover: #bbb8ff;
  --color-on-primary-container: #e0dfff;
  --color-brand-active: #d0ccff;
  --color-border-outline: #8e8d9c;
  --color-border-outline-variant: #46464f;
  --color-surface-primary-container: #403e6a;
}
:root {
  --zIndex-canvas: 1;
  --zIndex-interactiveCanvas: 2;
  --zIndex-svgLayer: 3;
  --zIndex-wysiwyg: 3;
  --zIndex-canvasButtons: 3;
  --zIndex-layerUI: 4;
  --zIndex-eyeDropperBackdrop: 5;
  --zIndex-eyeDropperPreview: 6;
  --zIndex-hyperlinkContainer: 7;
  --zIndex-modal: 1000;
  --zIndex-popup: 1001;
  --zIndex-toast: 999999;
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
  --sat: env(safe-area-inset-top);
}
body.excalidraw-cursor-resize,
body.excalidraw-cursor-resize a:hover,
body.excalidraw-cursor-resize * {
  cursor: ew-resize;
}
.excalidraw {
  --ui-font:
    Assistant,
    system-ui,
    BlinkMacSystemFont,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-family: var(--ui-font);
  position: relative;
  overflow: hidden;
  color: var(--text-primary-color);
  display: flex;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw button {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.excalidraw:focus {
  outline: none;
}
.excalidraw .excalidraw-link,
.excalidraw a {
  font-weight: 500;
  text-decoration: none;
  color: var(--link-color);
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
}
.excalidraw .excalidraw-link:hover,
.excalidraw a:hover {
  text-decoration: underline;
}
.excalidraw .excalidraw-link:active,
.excalidraw a:active {
  text-decoration: none;
}
.excalidraw canvas {
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  z-index: var(--zIndex-canvas);
}
.excalidraw canvas.interactive {
  z-index: var(--zIndex-interactiveCanvas);
}
.excalidraw__canvas-wrapper,
.excalidraw__canvas.static {
  pointer-events: none;
}
.excalidraw__canvas {
  position: absolute;
}
.excalidraw__embeddable {
  width: 100%;
  height: 100%;
  border: 0;
}
.excalidraw__embeddable-container {
  position: absolute;
  z-index: 2;
  transform-origin: top left;
  pointer-events: none;
}
.excalidraw.theme--dark canvas {
  filter: var(--theme-filter);
}
.excalidraw .FixedSideContainer {
  padding-top: var(--sat, 0);
  padding-right: var(--sar, 0);
  padding-bottom: var(--sab, 0);
  padding-left: var(--sal, 0);
}
.excalidraw .panelRow {
  display: flex;
  justify-content: space-between;
}
.excalidraw .panelColumn {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}
.excalidraw .panelColumn h3,
.excalidraw .panelColumn legend,
.excalidraw .panelColumn .control-label {
  margin: 0;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-primary-color);
  font-weight: 400;
  display: block;
}
.excalidraw .panelColumn .control-label input {
  display: block;
  width: 100%;
}
.excalidraw .panelColumn legend {
  padding: 0;
}
.excalidraw .panelColumn .iconSelectList {
  flex-wrap: wrap;
  position: relative;
}
.excalidraw .panelColumn .buttonList {
  flex-wrap: wrap;
  display: flex;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
.excalidraw .panelColumn .buttonList label {
  font-size: 0.75rem;
}
.excalidraw .panelColumn .buttonList input[type=radio],
.excalidraw .panelColumn .buttonList input[type=button] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.excalidraw .panelColumn .buttonList .iconRow {
  margin-top: 8px;
}
.excalidraw .panelColumn fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.excalidraw .divider {
  width: 1px;
  background-color: #e9ecef;
  margin: 1px;
}
.excalidraw .welcome-screen-menu-item:focus-visible,
.excalidraw .dropdown-menu-item:focus-visible,
.excalidraw button:focus-visible,
.excalidraw .buttonList label:focus-within,
.excalidraw input:focus-visible {
  outline: transparent;
  box-shadow: 0 0 0 1px var(--color-brand-hover);
}
.excalidraw .buttonList .ToolIcon__icon {
  all: unset !important;
  display: flex !important;
}
.excalidraw .buttonList button {
  background-color: transparent;
}
.excalidraw .buttonList label,
.excalidraw .buttonList button,
.excalidraw .buttonList .zIndexButton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  padding: 0;
}
.excalidraw .buttonList label svg,
.excalidraw .buttonList button svg,
.excalidraw .buttonList .zIndexButton svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .buttonList label:hover,
.excalidraw .buttonList button:hover,
.excalidraw .buttonList .zIndexButton:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .buttonList label:active,
.excalidraw .buttonList button:active,
.excalidraw .buttonList .zIndexButton:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .buttonList label.active,
.excalidraw .buttonList button.active,
.excalidraw .buttonList .zIndexButton.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .buttonList label.active:hover,
.excalidraw .buttonList button.active:hover,
.excalidraw .buttonList .zIndexButton.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .buttonList label.active svg,
.excalidraw .buttonList button.active svg,
.excalidraw .buttonList .zIndexButton.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw .buttonList label svg,
.excalidraw .buttonList button svg,
.excalidraw .buttonList .zIndexButton svg {
  width: var(--default-icon-size);
  height: var(--default-icon-size);
}
.excalidraw .App-top-bar {
  z-index: var(--zIndex-layerUI);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.excalidraw .App-bottom-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  --bar-padding: calc(4 * var(--space-factor));
  padding-top: max(var(--bar-padding), var(--sat,0));
  padding-right: var(--sar, 0);
  padding-bottom: var(--sab, 0);
  padding-left: var(--sal, 0);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.excalidraw .App-bottom-bar > .Island {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .App-bottom-bar > .Island .panelColumn {
  padding: 8px 8px 0 8px;
}
.excalidraw .App-toolbar {
  width: 100%;
}
.excalidraw .App-toolbar .eraser.ToolIcon:hover {
  --icon-fill-color: #fff;
  --keybinding-color: #fff;
}
.excalidraw .App-toolbar .eraser.active {
  background-color: var(--color-primary);
}
.excalidraw .App-toolbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}
.excalidraw .App-toolbar-content .dropdown-menu--mobile {
  bottom: 55px;
  top: auto;
}
.excalidraw .App-mobile-menu {
  width: 100%;
  overflow-x: visible;
  overflow-y: auto;
  box-sizing: border-box;
  margin-bottom: var(--bar-padding);
}
.excalidraw .App-menu {
  display: grid;
  color: var(--icon-fill-color);
}
.excalidraw .shapes-section {
  display: flex;
  justify-content: center;
  pointer-events: none !important;
}
.excalidraw .shapes-section > * {
  pointer-events: var(--ui-pointerEvents);
}
.excalidraw .App-menu_top {
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 2rem;
  align-items: flex-start;
  cursor: default;
  pointer-events: none !important;
}
.excalidraw .App-menu_top > * {
  pointer-events: var(--ui-pointerEvents);
}
@media (min-width: 1536px) {
  .excalidraw .App-menu_top {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3rem;
  }
}
.excalidraw .App-menu_top > *:first-child {
  justify-self: flex-start;
}
.excalidraw .App-menu_top > *:last-child {
  justify-self: flex-end;
}
.excalidraw .App-menu_bottom {
  position: absolute;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  cursor: default;
  pointer-events: none !important;
  box-sizing: border-box;
  padding: 0 1rem;
}
.excalidraw .App-menu_bottom--transition-left section {
  width: 185px;
}
.excalidraw .App-menu_bottom section {
  display: flex;
}
.excalidraw .App-menu_bottom > *:first-child {
  justify-self: flex-start;
}
.excalidraw .App-menu_bottom > *:last-child {
  justify-self: flex-end;
}
.excalidraw .App-menu_left {
  grid-template-rows: 1fr auto 1fr;
  height: 100%;
}
.excalidraw .App-menu_right {
  grid-template-rows: 1fr;
  height: 100%;
}
.excalidraw .App-menu__left {
  overflow-y: auto;
  padding: 0.75rem;
  width: 12.5rem;
  box-sizing: border-box;
  position: absolute;
}
.excalidraw .dropdown-select {
  height: 1.5rem;
  padding: 0;
  padding-inline-start: 0.5rem;
  padding-inline-end: 1.5rem;
  color: var(--icon-fill-color);
  background-color: var(--button-gray-1);
  border-radius: var(--space-factor);
  border: 1px solid var(--button-gray-2);
  font-size: 0.8rem;
  font-family: inherit;
  outline: none;
  appearance: none;
  background-image: var(--dropdown-icon);
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%, 0 0;
  background-size: 0.65em auto, 100%;
}
:root[dir=rtl] .excalidraw .dropdown-select {
  background-position: left 0.7rem top 50%, 0 0;
}
.excalidraw .dropdown-select:focus {
  box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
.excalidraw .dropdown-select:hover {
  background-color: var(--button-gray-2);
}
.excalidraw .dropdown-select:active {
  background-color: var(--button-gray-2);
}
.excalidraw .dropdown-select__language {
  height: 2rem;
  background-color: var(--island-bg-color);
  border-color: var(--default-border-color) !important;
  cursor: pointer;
}
.excalidraw .dropdown-select__language:hover {
  background-color: var(--island-bg-color);
}
.excalidraw .scroll-back-to-content {
  border-radius: var(--border-radius-lg);
  background-color: var(--island-bg-color);
  color: var(--icon-fill-color);
  border: 1px solid var(--default-border-color);
  padding: 10px 20px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  pointer-events: var(--ui-pointerEvents);
  font-family: inherit;
}
.excalidraw .scroll-back-to-content:hover {
  background-color: var(--button-hover-bg);
}
.excalidraw .scroll-back-to-content:active {
  border: 1px solid var(--button-active-border);
}
.excalidraw .help-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;
  width: var(--button-width, var(--default-button-size));
  height: var(--button-height, var(--default-button-size));
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--button-border, var(--default-border-color));
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
  font-family: var(--ui-font);
  border: none;
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
  background-color: var(--color-surface-low);
  width: var(--lg-button-size);
  height: var(--lg-button-size);
}
.excalidraw .help-icon svg {
  width: var(--button-width, var(--lg-icon-size));
  height: var(--button-height, var(--lg-icon-size));
}
.excalidraw .help-icon:hover {
  background-color: var(--button-hover-bg, var(--island-bg-color));
  border-color: var(--button-hover-border, var(--button-border, var(--default-border-color)));
  color: var(--button-hover-color, var(--button-color, var(--text-primary-color, inherit)));
}
.excalidraw .help-icon:active {
  background-color: var(--button-active-bg, var(--island-bg-color));
  border-color: var(--button-active-border, var(--color-primary-darkest));
}
.excalidraw .help-icon.active {
  background-color: var(--button-selected-bg, var(--color-surface-primary-container));
  border-color: var(--button-selected-border, var(--color-surface-primary-container));
}
.excalidraw .help-icon.active:hover {
  background-color: var(--button-selected-hover-bg, var(--color-surface-primary-container));
}
.excalidraw .help-icon.active svg {
  color: var(--button-color, var(--color-on-primary-container));
}
.excalidraw .help-icon:active {
  box-shadow: 0 0 0 1px var(--color-brand-active);
}
.excalidraw .help-icon svg {
  width: var(--lg-icon-size);
  height: var(--lg-icon-size);
}
.excalidraw .reset-zoom-button {
  font-family: var(--ui-font);
}
.excalidraw .finalize-button {
  display: grid;
  grid-auto-flow: column;
  gap: 0.4em;
  margin-top: auto;
  margin-bottom: auto;
  margin-inline-start: 0.6em;
}
.excalidraw .undo-redo-buttons,
.excalidraw .eraser-buttons {
  display: grid;
  grid-auto-flow: column;
  margin-top: auto;
  margin-bottom: auto;
  margin-inline-start: 0.6em;
}
.excalidraw--mobile.excalidraw aside {
  display: none;
}
.excalidraw--mobile.excalidraw .scroll-back-to-content {
  bottom: calc(80px + var(--sab, 0));
  z-index: -1;
}
:root[dir=rtl] .excalidraw .rtl-mirror {
  transform: scaleX(-1);
}
.excalidraw .zen-mode-visibility {
  visibility: visible;
  opacity: 1;
  height: auto;
  width: auto;
  transition: opacity 0.5s;
}
.excalidraw .zen-mode-visibility.zen-mode-visibility--hidden {
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  transition: opacity 0.5s;
}
.excalidraw .disable-pointerEvents {
  pointer-events: none !important;
}
.excalidraw.excalidraw--view-mode .App-menu {
  display: flex;
  justify-content: space-between;
}
.excalidraw input.is-redacted {
  -webkit-text-security: disc;
}
.excalidraw input[type=text],
.excalidraw textarea:not(.excalidraw-wysiwyg) {
  color: var(--text-primary-color);
  border: 1.5px solid var(--input-border-color);
  padding: 0.75rem;
  white-space: nowrap;
  border-radius: var(--space-factor);
  background-color: var(--input-bg-color);
}
.excalidraw input[type=text]:not(:focus):hover,
.excalidraw textarea:not(.excalidraw-wysiwyg):not(:focus):hover {
  border-color: var(--color-brand-hover);
}
.excalidraw input[type=text]:focus,
.excalidraw textarea:not(.excalidraw-wysiwyg):focus {
  outline: none;
  border-color: var(--color-brand-hover);
}
@media print {
  .excalidraw .App-bottom-bar,
  .excalidraw .FixedSideContainer,
  .excalidraw .layer-ui__wrapper {
    display: none;
  }
}
.excalidraw ::-webkit-scrollbar {
  width: 4px;
  height: 3px;
}
.excalidraw select::-webkit-scrollbar {
  width: 10px;
}
.excalidraw ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}
.excalidraw ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
.excalidraw ::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb);
}
.excalidraw .mobile-misc-tools-container {
  position: absolute;
  top: calc(5rem - var(--editor-container-padding));
  right: calc(var(--editor-container-padding) * -1);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sidebar-border-color);
  border-top-left-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-right: 0;
  overflow: hidden;
  background-color: var(--island-bg-color);
}
.excalidraw .mobile-misc-tools-container .ToolIcon__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
}
.excalidraw .mobile-misc-tools-container .default-sidebar-trigger {
  border: 0;
}
.excalidraw .App-toolbar--mobile {
  overflow: visible;
  max-width: 98vw;
}
.excalidraw .App-toolbar--mobile .ToolIcon__keybinding {
  display: none;
}
.excalidraw .UserList-Wrapper {
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}
.excalidraw .UserList-Wrapper legend {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0 0 0.25rem;
  padding: 0;
}
.excalidraw .main-menu-trigger {
  border: none;
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
  background-color: var(--color-surface-low);
}
.excalidraw .main-menu-trigger:active {
  box-shadow: 0 0 0 1px var(--color-brand-active);
}
.excalidraw .App-mobile-menu,
.excalidraw .App-menu__left {
  --button-border: transparent;
  --button-bg: var(--color-surface-mid);
}
.excalidraw.theme--dark.excalidraw .App-mobile-menu,
.excalidraw.theme--dark.excalidraw .App-menu__left {
  --button-hover-bg: #363541;
  --button-bg: var(--color-surface-high);
}
.excalidraw .App-menu__left .buttonList {
  padding: 0.25rem 0;
}
.excalidraw .excalidraw__paragraph {
  margin: 1rem 0;
}
.excalidraw .Modal__content .excalidraw__paragraph:first-child {
  margin-top: 0;
}
.excalidraw .Modal__content .excalidraw__paragraph + .excalidraw__paragraph {
  margin-top: 0rem;
}
.ErrorSplash.excalidraw {
  min-height: 100vh;
  padding: 20px 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: text;
          user-select: text;
}
.ErrorSplash.excalidraw .ErrorSplash-messageContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: #ffe3e3;
  border: 3px solid #c92a2a;
}
.ErrorSplash.excalidraw .ErrorSplash-paragraph {
  margin: 15px 0;
  max-width: 600px;
}
.ErrorSplash.excalidraw .ErrorSplash-paragraph.align-center {
  text-align: center;
}
.ErrorSplash.excalidraw .bigger,
.ErrorSplash.excalidraw .bigger button {
  font-size: 1.1em;
}
.ErrorSplash.excalidraw .smaller,
.ErrorSplash.excalidraw .smaller button {
  font-size: 0.9em;
}
.ErrorSplash.excalidraw .ErrorSplash-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ErrorSplash.excalidraw .ErrorSplash-details textarea {
  width: 100%;
  margin: 10px 0;
  font-family: "Cascadia";
  font-size: 0.8em;
}
.excalidraw__embeddable-container .excalidraw__embeddable-container__inner {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--embeddable-radius);
}
.excalidraw__embeddable-container .excalidraw__embeddable__outer {
  width: 100%;
  height: 100%;
}
.excalidraw__embeddable-container .excalidraw__embeddable__outer > * {
  border-radius: var(--embeddable-radius);
}
.excalidraw__embeddable-container .excalidraw__embeddable-hint {
  position: absolute;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 1.6rem;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-family: "Assistant";
}

/* fonts/fonts.css */
@font-face {
  font-family: "Assistant";
  src: url("/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/@excalidraw+excalidraw@0.18.1_@types+react-dom@18.3.7_@types+react@18.3.28__@types+react@18.3_ti4w4tnrb7vn43t42tga6xzeyi/node_modules/@excalidraw/excalidraw/dist/dev/fonts/Assistant/Assistant-Regular.woff2") format("woff2");
  font-weight: 400;
  style: normal;
  display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/@excalidraw+excalidraw@0.18.1_@types+react-dom@18.3.7_@types+react@18.3.28__@types+react@18.3_ti4w4tnrb7vn43t42tga6xzeyi/node_modules/@excalidraw/excalidraw/dist/dev/fonts/Assistant/Assistant-Medium.woff2") format("woff2");
  font-weight: 500;
  style: normal;
  display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/@excalidraw+excalidraw@0.18.1_@types+react-dom@18.3.7_@types+react@18.3.28__@types+react@18.3_ti4w4tnrb7vn43t42tga6xzeyi/node_modules/@excalidraw/excalidraw/dist/dev/fonts/Assistant/Assistant-SemiBold.woff2") format("woff2");
  font-weight: 600;
  style: normal;
  display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/@excalidraw+excalidraw@0.18.1_@types+react-dom@18.3.7_@types+react@18.3.28__@types+react@18.3_ti4w4tnrb7vn43t42tga6xzeyi/node_modules/@excalidraw/excalidraw/dist/dev/fonts/Assistant/Assistant-Bold.woff2") format("woff2");
  font-weight: 700;
  style: normal;
  display: swap;
}

/* components/footer/FooterCenter.scss */
.footer-center {
  pointer-events: none;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-inline-end: 0.6rem;
}
.footer-center > * {
  pointer-events: var(--ui-pointerEvents);
}

/* components/ExcalidrawLogo.scss */
.excalidraw .ExcalidrawLogo {
  --logo-icon--xs: 2rem;
  --logo-text--xs: 1.5rem;
  --logo-icon--small: 2.5rem;
  --logo-text--small: 1.75rem;
  --logo-icon--normal: 3rem;
  --logo-text--normal: 2.2rem;
  --logo-icon--large: 90px;
  --logo-text--large: 65px;
  display: flex;
  align-items: center;
}
.excalidraw .ExcalidrawLogo svg {
  flex: 0 0 auto;
}
.excalidraw .ExcalidrawLogo .ExcalidrawLogo-icon {
  width: auto;
  color: var(--color-logo-icon);
}
.excalidraw .ExcalidrawLogo .ExcalidrawLogo-text {
  margin-left: 0.75rem;
  width: auto;
  color: var(--color-logo-text);
}
.excalidraw .ExcalidrawLogo.is-xs .ExcalidrawLogo-icon {
  height: var(--logo-icon--xs);
}
.excalidraw .ExcalidrawLogo.is-xs .ExcalidrawLogo-text {
  height: var(--logo-text--xs);
}
.excalidraw .ExcalidrawLogo.is-small .ExcalidrawLogo-icon {
  height: var(--logo-icon--small);
}
.excalidraw .ExcalidrawLogo.is-small .ExcalidrawLogo-text {
  height: var(--logo-text--small);
}
.excalidraw .ExcalidrawLogo.is-normal .ExcalidrawLogo-icon {
  height: var(--logo-icon--normal);
}
.excalidraw .ExcalidrawLogo.is-normal .ExcalidrawLogo-text {
  height: var(--logo-text--normal);
}
.excalidraw .ExcalidrawLogo.is-large .ExcalidrawLogo-icon {
  height: var(--logo-icon--large);
}
.excalidraw .ExcalidrawLogo.is-large .ExcalidrawLogo-text {
  height: var(--logo-text--large);
}

/* components/welcome-screen/WelcomeScreen.scss */
.excalidraw .excalifont {
  font-family: "Excalifont", "Xiaolai";
}
.excalidraw .welcome-screen-decor {
  pointer-events: none;
  color: var(--color-gray-40);
}
.excalidraw .welcome-screen-decor a {
  --color: var(--color-primary);
  color: var(--color);
  text-decoration: none;
  margin-bottom: -6px;
}
.excalidraw.theme--dark .welcome-screen-decor {
  color: var(--color-gray-60);
}
@media (max-height: 599px) {
  .excalidraw .welcome-screen-decor-hint {
    display: none !important;
  }
}
@media (max-width: 1024px), (max-width: 800px) {
  .excalidraw .welcome-screen-decor-hint .welcome-screen-decor--help,
  .excalidraw .welcome-screen-decor-hint .welcome-screen-decor--menu {
    display: none;
  }
}
.excalidraw .welcome-screen-decor-hint--help {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 100%;
}
:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--help {
  left: 0;
  right: auto;
}
.excalidraw .welcome-screen-decor-hint--help svg {
  margin-top: 0.5rem;
  width: 85px;
  height: 71px;
  transform: scaleX(-1) rotate(80deg);
}
:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--help svg {
  transform: rotate(80deg);
}
.excalidraw .welcome-screen-decor-hint--toolbar {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2.5rem;
  display: flex;
  align-items: baseline;
}
.excalidraw .welcome-screen-decor-hint--toolbar .welcome-screen-decor-hint__label {
  width: 120px;
  position: relative;
  top: -0.5rem;
}
.excalidraw .welcome-screen-decor-hint--toolbar svg {
  width: 38px;
  height: 78px;
}
:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--toolbar svg {
  transform: scaleX(-1);
}
.excalidraw .welcome-screen-decor-hint--menu {
  position: absolute;
  width: 320px;
  font-size: 1rem;
  top: 100%;
  margin-top: 0.25rem;
  margin-inline-start: 0.6rem;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.excalidraw .welcome-screen-decor-hint--menu svg {
  width: 41px;
  height: 94px;
}
:root[dir=rtl] .excalidraw .welcome-screen-decor-hint--menu svg {
  transform: scaleX(-1);
}
@media (max-width: 860px) {
  .excalidraw .welcome-screen-decor-hint--menu .welcome-screen-decor-hint__label {
    max-width: 160px;
  }
}
.excalidraw .welcome-screen-center {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  position: absolute;
  pointer-events: none;
  left: 1rem;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
}
.excalidraw .welcome-screen-center__logo {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  font-size: 2.25rem;
}
.excalidraw .welcome-screen-center__heading {
  font-size: 1.125rem;
  text-align: center;
}
.excalidraw .welcome-screen-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  align-items: center;
}
.excalidraw .welcome-screen-menu-item {
  box-sizing: border-box;
  pointer-events: var(--ui-pointerEvents);
  color: var(--color-gray-50);
  font-size: 0.875rem;
  width: 100%;
  min-width: 300px;
  max-width: 400px;
  display: grid;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 1px solid transparent;
  padding: 0.75rem;
  border-radius: var(--border-radius-md);
  grid-template-columns: calc(var(--default-icon-size) + 0.5rem) 1fr 3rem;
}
.excalidraw .welcome-screen-menu-item__text {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-align: left;
  column-gap: 0.5rem;
}
.excalidraw .welcome-screen-menu-item__icon {
  width: var(--default-icon-size);
  height: var(--default-icon-size);
}
.excalidraw .welcome-screen-menu-item__shortcut {
  margin-left: auto;
  color: var(--color-gray-40);
  font-size: 0.75rem;
}
.excalidraw .welcome-screen-menu-item:hover {
  text-decoration: none;
  background: var(--button-hover-bg);
}
.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,
.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,
.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__text {
  color: var(--color-gray-100);
}
.excalidraw .welcome-screen-menu-item:active {
  background: var(--button-hover-bg);
  border-color: var(--color-brand-active);
}
.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,
.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,
.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__text {
  color: var(--color-gray-100);
}
.excalidraw.theme--dark .welcome-screen-menu-item {
  color: var(--color-gray-60);
}
.excalidraw.theme--dark .welcome-screen-menu-item__shortcut {
  color: var(--color-gray-60);
}
.excalidraw.theme--dark .welcome-screen-menu-item:hover {
  background-color: var(--color-surface-low);
}
.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,
.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,
.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__text {
  color: var(--color-gray-10);
}
.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,
.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,
.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__text {
  color: var(--color-gray-10);
}
@media (max-height: 599px) {
  .excalidraw .welcome-screen-center {
    margin-top: 4rem;
  }
}
@media (min-height: 600px) and (max-height: 900px) {
  .excalidraw .welcome-screen-center {
    margin-top: 8rem;
  }
}
@media (max-height: 500px), (max-width: 320px) {
  .excalidraw .welcome-screen-center {
    display: none;
  }
}

/* components/live-collaboration/LiveCollaborationTrigger.scss */
.excalidraw .collab-button {
  --button-bg: var(--color-primary);
  --button-color: var(--color-surface-lowest);
  --button-border: var(--color-primary);
  --button-width: var(--lg-button-size);
  --button-height: var(--lg-button-size);
  --button-hover-bg: var(--color-primary-darker);
  --button-hover-border: var(--color-primary-darker);
  --button-active-bg: var(--color-primary-darker);
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
  flex-shrink: 0;
}
.excalidraw .collab-button.active.active {
  background-color: #0fb884;
  border-color: #0fb884;
}
.excalidraw .collab-button.active.active svg {
  color: #fff;
}
.excalidraw .collab-button.active.active:hover,
.excalidraw .collab-button.active.active:active {
  background-color: #0fb884;
  border-color: #0fb884;
}
.excalidraw .CollabButton.is-collaborating {
  background-color: var(--button-special-active-bg-color);
}
.excalidraw .CollabButton.is-collaborating .ToolIcon__icon svg,
.excalidraw .CollabButton.is-collaborating .ToolIcon__label {
  color: var(--icon-green-fill-color);
}
.excalidraw .CollabButton-collaborators {
  min-width: 1em;
  min-height: 1em;
  line-height: 1;
  position: absolute;
  bottom: -5px;
  padding: 3px;
  border-radius: 50%;
  background-color: #b2f2bb;
  color: #2b8a3e;
  font-size: 0.6rem;
  font-family: "Cascadia";
}
:root[dir=ltr] .excalidraw .CollabButton-collaborators {
  right: -5px;
}
:root[dir=rtl] .excalidraw .CollabButton-collaborators {
  left: -5px;
}
                                     
.CodeMirror{font-family:monospace;height:300px;color:black;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{background-color:white}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:black}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid black;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0 !important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor-mark{background-color:rgba(20, 255, 20, 0.5);animation:blink 1.06s steps(1) infinite}.cm-animate-fat-cursor{width:auto;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:blue}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:bold}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:blue}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3,.cm-s-default .cm-type{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta{color:#555}.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-s-default .cm-error{color:red}.cm-invalidchar{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255, 150, 0, 0.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:white}.CodeMirror-scroll{overflow:scroll !important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-vscrollbar,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-gutter-filler{position:absolute;z-index:6;display:none;outline:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none !important;border:none !important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber{box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-focused div.CodeMirror-cursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection, .CodeMirror-line>span::-moz-selection, .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255, 255, 0, 0.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.cm-s-hopscotch.CodeMirror{background:#322931;color:#d5d3d5}.cm-s-hopscotch div.CodeMirror-selected{background:#433b42 !important}.cm-s-hopscotch .CodeMirror-gutters{background:#322931;border-right:0px}.cm-s-hopscotch .CodeMirror-linenumber{color:#797379}.cm-s-hopscotch .CodeMirror-cursor{border-left:1px solid #989498 !important}.cm-s-hopscotch span.cm-comment{color:#b33508}.cm-s-hopscotch span.cm-atom{color:#c85e7c}.cm-s-hopscotch span.cm-number{color:#c85e7c}.cm-s-hopscotch span.cm-property,.cm-s-hopscotch span.cm-attribute{color:#8fc13e}.cm-s-hopscotch span.cm-keyword{color:#dd464c}.cm-s-hopscotch span.cm-string{color:#fdcc59}.cm-s-hopscotch span.cm-variable{color:#8fc13e}.cm-s-hopscotch span.cm-variable-2{color:#1290bf}.cm-s-hopscotch span.cm-def{color:#fd8b19}.cm-s-hopscotch span.cm-error{background:#dd464c;color:#989498}.cm-s-hopscotch span.cm-bracket{color:#d5d3d5}.cm-s-hopscotch span.cm-tag{color:#dd464c}.cm-s-hopscotch span.cm-link{color:#c85e7c}.cm-s-hopscotch .CodeMirror-matchingbracket{text-decoration:underline;color:white !important}.cm-s-hopscotch .CodeMirror-activeline-background{background:#302020}.sp-container{position:absolute;top:0;left:0;display:inline-block;z-index:9999994;overflow:hidden}.sp-container.sp-flat{position:relative}.sp-container,.sp-container *{box-sizing:content-box}.sp-top{position:relative;width:100%;display:inline-block}.sp-top-inner{position:absolute;top:0;left:0;bottom:0;right:0}.sp-color{position:absolute;top:0;left:0;bottom:0;right:20%}.sp-hue{position:absolute;top:0;right:0;bottom:0;left:84%;height:100%}.sp-clear-enabled .sp-hue{top:33px;height:77.5%}.sp-fill{padding-top:80%}.sp-sat,.sp-val{position:absolute;top:0;left:0;right:0;bottom:0}.sp-alpha-enabled .sp-top{margin-bottom:18px}.sp-alpha-enabled .sp-alpha{display:block}.sp-alpha-handle{position:absolute;top:-4px;bottom:-4px;width:6px;left:50%;cursor:pointer;border:1px solid #000;background:#fff;opacity:.8}.sp-alpha{display:none;position:absolute;bottom:-14px;right:0;left:0;height:8px}.sp-alpha-inner{border:solid 1px #333}.sp-clear{display:none}.sp-clear.sp-clear-display{background-position:center}.sp-clear-enabled .sp-clear{display:block;position:absolute;top:0px;right:0;bottom:0;left:84%;height:28px}.sp-container,.sp-replacer,.sp-preview,.sp-dragger,.sp-slider,.sp-alpha,.sp-clear,.sp-alpha-handle,.sp-container.sp-dragging .sp-input,.sp-container button{-webkit-user-select:none;-moz-user-select:-moz-none;-o-user-select:none;user-select:none}.sp-container.sp-input-disabled .sp-input-container{display:none}.sp-container.sp-buttons-disabled .sp-button-container{display:none}.sp-container.sp-palette-buttons-disabled .sp-palette-button-container{display:none}.sp-palette-only .sp-picker-container{display:none}.sp-palette-disabled .sp-palette-container{display:none}.sp-initial-disabled .sp-initial{display:none}.sp-sat{background-image:linear-gradient(to right, #fff, rgba(204, 154, 129, 0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr="#FFFFFFFF", endColorstr="#00CC9A81")}.sp-val{background-image:linear-gradient(to top, #000, rgba(204, 154, 129, 0));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00CC9A81", endColorstr="#FF000000")}.sp-hue{background:linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)}.sp-1{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#ffff00")}.sp-2{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#00ff00")}.sp-3{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#00ffff")}.sp-4{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffff", endColorstr="#0000ff")}.sp-5{height:16%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0000ff", endColorstr="#ff00ff")}.sp-6{height:17%;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00ff", endColorstr="#ff0000")}.sp-hidden{display:none !important}.sp-cf:before,.sp-cf:after{content:"";display:table}.sp-cf:after{clear:both}@media(max-device-width: 480px){.sp-color{right:40%}.sp-hue{left:63%}.sp-fill{padding-top:60%}}.sp-dragger{border-radius:5px;height:5px;width:5px;border:1px solid #fff;background:#000;cursor:pointer;position:absolute;top:0;left:0}.sp-slider{position:absolute;top:0;cursor:pointer;height:3px;left:-1px;right:-1px;border:1px solid #000;background:#fff;opacity:.8}.sp-container{border-radius:0;background-color:#ececec;border:solid 1px #f0c49b;padding:0}.sp-container,.sp-container button,.sp-container input,.sp-color,.sp-hue,.sp-clear{font:normal 12px "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;-ms-box-sizing:border-box;box-sizing:border-box}.sp-top{margin-bottom:3px}.sp-color,.sp-hue,.sp-clear{border:solid 1px #666}.sp-input-container{float:right;width:100px;margin-bottom:4px}.sp-initial-disabled .sp-input-container{width:100%}.sp-input{font-size:12px !important;border:1px inset;padding:4px 5px;margin:0;width:100%;background:transparent;border-radius:3px;color:#222}.sp-input:focus{border:1px solid orange}.sp-input.sp-validation-error{border:1px solid red;background:#fdd}.sp-picker-container,.sp-palette-container{float:left;position:relative;padding:10px;padding-bottom:300px;margin-bottom:-290px}.sp-picker-container{width:172px;border-left:solid 1px #fff}.sp-palette-container{border-right:solid 1px #ccc}.sp-palette-only .sp-palette-container{border:0}.sp-palette .sp-thumb-el{display:block;position:relative;float:left;width:24px;height:15px;margin:3px;cursor:pointer;border:solid 2px transparent}.sp-palette .sp-thumb-el:hover,.sp-palette .sp-thumb-el.sp-thumb-active{border-color:orange}.sp-thumb-el{position:relative}.sp-initial{float:left;border:solid 1px #333}.sp-initial span{width:30px;height:25px;border:none;display:block;float:left;margin:0}.sp-initial .sp-clear-display{background-position:center}.sp-palette-button-container,.sp-button-container{float:right}.sp-replacer{margin:0;overflow:hidden;cursor:pointer;padding:4px;display:inline-block;border:solid 1px #91765d;background:#eee;color:#333;vertical-align:middle}.sp-replacer:hover,.sp-replacer.sp-active{border-color:#f0c49b;color:#111}.sp-replacer.sp-disabled{cursor:default;border-color:silver;color:silver}.sp-dd{padding:2px 0;height:16px;line-height:16px;float:left;font-size:10px}.sp-preview{position:relative;width:25px;height:20px;border:solid 1px #222;margin-right:5px;float:left;z-index:0}.sp-palette{max-width:220px}.sp-palette .sp-thumb-el{width:16px;height:16px;margin:2px 1px;border:solid 1px #d0d0d0}.sp-container{padding-bottom:0}.sp-container button{background-color:#eee;background-image:linear-gradient(to bottom, #eeeeee, #cccccc);border:1px solid #ccc;border-bottom:1px solid #bbb;border-radius:3px;color:#333;font-size:14px;line-height:1;padding:5px 4px;text-align:center;text-shadow:0 1px 0 #eee;vertical-align:middle}.sp-container button:hover{background-color:#ddd;background-image:linear-gradient(to bottom, #dddddd, #bbbbbb);border:1px solid #bbb;border-bottom:1px solid #999;cursor:pointer;text-shadow:0 1px 0 #ddd}.sp-container button:active{border:1px solid #aaa;border-bottom:1px solid #888;-ms-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;-o-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee}.sp-cancel{font-size:11px;color:#d93f3f !important;margin:0;padding:2px;margin-right:5px;vertical-align:middle;text-decoration:none}.sp-cancel:hover{color:#d93f3f !important;text-decoration:underline}.sp-palette span:hover,.sp-palette span.sp-thumb-active{border-color:#000}.sp-preview,.sp-alpha,.sp-thumb-el{position:relative;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.sp-preview-inner,.sp-alpha-inner,.sp-thumb-inner{display:block;position:absolute;top:0;left:0;bottom:0;right:0}.sp-palette .sp-thumb-inner{background-position:50% 50%;background-repeat:no-repeat}.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=)}.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=)}.sp-clear-display{background-repeat:no-repeat;background-position:center;background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==)}.gjs-is__grab,.gjs-is__grab *{cursor:grab !important}.gjs-is__grabbing,.gjs-is__grabbing *{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;cursor:grabbing !important}.gjs-one-bg{background-color:var(--gjs-primary-color)}.gjs-one-color{color:var(--gjs-primary-color)}.gjs-one-color-h:hover{color:var(--gjs-primary-color)}.gjs-two-bg{background-color:var(--gjs-secondary-color)}.gjs-two-color{color:var(--gjs-secondary-color)}.gjs-two-color-h:hover{color:var(--gjs-secondary-color)}.gjs-three-bg{background-color:var(--gjs-tertiary-color)}.gjs-three-color{color:var(--gjs-tertiary-color)}.gjs-three-color-h:hover{color:var(--gjs-tertiary-color)}.gjs-four-bg{background-color:var(--gjs-quaternary-color)}.gjs-four-color{color:var(--gjs-quaternary-color)}.gjs-four-color-h:hover{color:var(--gjs-quaternary-color)}.gjs-danger-bg{background-color:var(--gjs-color-red)}.gjs-danger-color{color:var(--gjs-color-red)}.gjs-danger-color-h:hover{color:var(--gjs-color-red)}.gjs-bg-main,.gjs-sm-colorp-c,.gjs-off-prv{background-color:var(--gjs-main-color)}.gjs-color-main,.gjs-sm-stack #gjs-sm-add,.gjs-off-prv{color:var(--gjs-font-color);fill:var(--gjs-font-color)}.gjs-color-active{color:var(--gjs-font-color-active);fill:var(--gjs-font-color-active)}.gjs-color-warn{color:var(--gjs-color-warn);fill:var(--gjs-color-warn)}.gjs-color-hl{color:var(--gjs-color-highlight);fill:var(--gjs-color-highlight)}.gjs-invis-invis,.gjs-clm-tags #gjs-clm-new,.gjs-no-app{background-color:transparent;border:none;color:inherit}.gjs-no-app{height:10px}.gjs-test::btn{color:"#fff"}.opac50{opacity:.5;filter:alpha(opacity=50)}.gjs-checker-bg,.gjs-field-colorp-c,.checker-bg,.gjs-sm-layer-preview{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")}.gjs-no-user-select,.gjs-rte-toolbar,.gjs-layer-name,.gjs-grabbing,.gjs-grabbing *{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.gjs-no-pointer-events,.gjs-margin-v-el,.gjs-padding-v-el,.gjs-fixedmargin-v-el,.gjs-fixedpadding-v-el,.gjs-resizer-c{pointer-events:none}.gjs-bdrag{pointer-events:none !important;position:absolute !important;z-index:10 !important;width:auto}.gjs-drag-helper{background-color:var(--gjs-color-blue) !important;pointer-events:none !important;position:absolute !important;z-index:10 !important;transform:scale(0.3) !important;transform-origin:top left !important;-webkit-transform-origin:top left !important;margin:15px !important;transition:none !important;outline:none !important}.gjs-grabbing,.gjs-grabbing *{cursor:grabbing !important;cursor:-webkit-grabbing !important}.gjs-grabbing{overflow:hidden}.gjs-off-prv{position:relative;z-index:10;padding:5px;cursor:pointer}.gjs-editor-cont ::-webkit-scrollbar-track{background:var(--gjs-secondary-dark-color)}.gjs-editor-cont ::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.2)}.gjs-editor-cont ::-webkit-scrollbar{width:8px}:root{--gjs-main-color: #444;--gjs-primary-color: #444;--gjs-secondary-color: #ddd;--gjs-tertiary-color: #804f7b;--gjs-quaternary-color: #d278c9;--gjs-font-color: #ddd;--gjs-font-color-active: #f8f8f8;--gjs-main-dark-color: rgba(0, 0, 0, 0.2);--gjs-secondary-dark-color: rgba(0, 0, 0, 0.1);--gjs-main-light-color: rgba(255, 255, 255, 0.1);--gjs-secondary-light-color: rgba(255, 255, 255, 0.7);--gjs-soft-light-color: rgba(255, 255, 255, 0.015);--gjs-color-blue: #3b97e3;--gjs-color-red: #dd3636;--gjs-color-yellow: #ffca6f;--gjs-color-green: #62c462;--gjs-left-width: 15%;--gjs-color-highlight: #71b7f1;--gjs-color-warn: #ffca6f;--gjs-handle-margin: -5px;--gjs-light-border: rgba(255, 255, 255, 0.05);--gjs-arrow-color: rgba(255, 255, 255, 0.7);--gjs-dark-text-shadow: rgba(0, 0, 0, 0.2);--gjs-color-input-padding: 22px;--gjs-input-padding: 5px;--gjs-padding-elem-classmanager: 5px 6px;--gjs-upload-padding: 150px 10px;--gjs-animation-duration: 0.2s;--gjs-main-font: Helvetica, sans-serif;--gjs-font-size: 0.75rem;--gjs-placeholder-background-color: var(--gjs-color-green);--gjs-canvas-top: 40px;--gjs-flex-item-gap: 5px}.clear{clear:both}.no-select,.gjs-clm-tags #gjs-clm-close,.gjs-category-title,.gjs-layer-title,.gjs-block-category .gjs-title,.gjs-sm-sector-title,.gjs-trait-category .gjs-title,.gjs-com-no-select,.gjs-com-no-select img{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}.gjs-no-touch-actions{touch-action:none}.gjs-disabled{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;opacity:.5;filter:alpha(opacity=50)}.gjs-editor{font-family:var(--gjs-main-font);font-size:var(--gjs-font-size);position:relative;box-sizing:border-box;height:100%}.gjs-freezed,.gjs-freezed{opacity:.5;filter:alpha(opacity=50);pointer-events:none}.gjs-traits-label{border-bottom:1px solid var(--gjs-main-dark-color);font-weight:lighter;margin-bottom:5px;padding:10px;text-align:left}.gjs-label-wrp{width:30%;min-width:30%}.gjs-field-wrp{flex-grow:1}.gjs-traits-c,.gjs-traits-cs{display:flex;flex-direction:column}.gjs-trait-categories{display:flex;flex-direction:column}.gjs-trait-category{width:100%}.gjs-trait-category .gjs-caret-icon{margin-right:5px}.gjs-trt-header{font-weight:lighter;padding:10px}.gjs-trt-trait{display:flex;justify-content:flex-start;padding:5px 10px;font-weight:lighter;align-items:center;text-align:left;gap:5px}.gjs-trt-traits{font-size:var(--gjs-font-size)}.gjs-trt-trait .gjs-label{text-align:left;text-overflow:ellipsis;overflow:hidden}.gjs-guide-info{position:absolute}.gjs-guide-info__content{position:absolute;height:100%;display:flex;width:100%;padding:5px}.gjs-guide-info__line{position:relative;margin:auto}.gjs-guide-info__line::before,.gjs-guide-info__line::after{content:"";display:block;position:absolute;background-color:inherit}.gjs-guide-info__y{padding:0 5px}.gjs-guide-info__y .gjs-guide-info__content{justify-content:center}.gjs-guide-info__y .gjs-guide-info__line{width:100%;height:1px}.gjs-guide-info__y .gjs-guide-info__line::before,.gjs-guide-info__y .gjs-guide-info__line::after{width:1px;height:10px;top:0;bottom:0;left:0;margin:auto}.gjs-guide-info__y .gjs-guide-info__line::after{left:auto;right:0}.gjs-guide-info__x{padding:5px 0}.gjs-guide-info__x .gjs-guide-info__content{align-items:center}.gjs-guide-info__x .gjs-guide-info__line{height:100%;width:1px}.gjs-guide-info__x .gjs-guide-info__line::before,.gjs-guide-info__x .gjs-guide-info__line::after{width:10px;height:1px;left:0;right:0;top:0;margin:auto;transform:translateX(-50%)}.gjs-guide-info__x .gjs-guide-info__line::after{top:auto;bottom:0}.gjs-badge{white-space:nowrap}.gjs-badge__icon{vertical-align:middle;display:inline-block;width:15px;height:15px}.gjs-badge__icon svg{fill:currentColor}.gjs-badge__name{display:inline-block;vertical-align:middle}.gjs-frame-wrapper{position:absolute;width:100%;height:100%;left:0;right:0;margin:auto}.gjs-frame-wrapper--anim{transition:width .35s ease,height .35s ease}.gjs-frame-wrapper__top{transform:translateY(-100%) translateX(-50%);display:flex;padding:5px 0;position:absolute;width:100%;left:50%;top:0}.gjs-frame-wrapper__top-r{margin-left:auto}.gjs-frame-wrapper__left{position:absolute;left:0;transform:translateX(-100%) translateY(-50%);height:100%;top:50%}.gjs-frame-wrapper__bottom{position:absolute;bottom:0;transform:translateY(100%) translateX(-50%);width:100%;left:50%}.gjs-frame-wrapper__right{position:absolute;right:0;transform:translateX(100%) translateY(-50%);height:100%;top:50%}.gjs-frame-wrapper__icon{width:24px;cursor:pointer}.gjs-frame-wrapper__icon>svg{fill:currentColor}.gjs-padding-v-top,.gjs-fixedpadding-v-top{width:100%;top:0;left:0}.gjs-padding-v-right,.gjs-fixedpadding-v-right{right:0}.gjs-padding-v-bottom,.gjs-fixedpadding-v-bottom{width:100%;left:0;bottom:0}.gjs-padding-v-left,.gjs-fixedpadding-v-left{left:0}.gjs-cv-canvas{box-sizing:border-box;width:calc(100% - var(--gjs-left-width));height:calc(100% - var(--gjs-canvas-top));bottom:0;overflow:hidden;z-index:1;position:absolute;left:0;top:var(--gjs-canvas-top)}.gjs-cv-canvas-bg{background-color:rgba(0,0,0,.15)}.gjs-cv-canvas.gjs-cui{width:100%;height:100%;top:0}.gjs-cv-canvas.gjs-is__grab .gjs-cv-canvas__frames,.gjs-cv-canvas.gjs-is__grabbing .gjs-cv-canvas__frames{pointer-events:none}.gjs-cv-canvas__frames{position:absolute;top:0;left:0;width:100%;height:100%}.gjs-cv-canvas__spots{position:absolute;pointer-events:none;z-index:1}.gjs-cv-canvas .gjs-ghost{display:none;pointer-events:none;background-color:#5b5b5b;border:2px dashed #ccc;position:absolute;z-index:10;opacity:.55;filter:alpha(opacity=55)}.gjs-cv-canvas .gjs-highlighter,.gjs-cv-canvas .gjs-highlighter-sel{position:absolute;outline:1px solid var(--gjs-color-blue);outline-offset:-1px;pointer-events:none;width:100%;height:100%}.gjs-cv-canvas .gjs-highlighter-warning{outline:3px solid var(--gjs-color-yellow)}.gjs-cv-canvas .gjs-highlighter-sel{outline:2px solid var(--gjs-color-blue);outline-offset:-2px}.gjs-cv-canvas #gjs-tools,.gjs-cv-canvas .gjs-tools{width:100%;height:100%;position:absolute;top:0;left:0;outline:none;z-index:1}.gjs-cv-canvas #gjs-tools{z-index:2}.gjs-cv-canvas *{box-sizing:border-box}.gjs-frame{outline:medium none;height:100%;width:100%;border:none;margin:auto;display:block;transition:width .35s ease,height .35s ease;position:absolute;top:0;bottom:0;left:0;right:0}.gjs-toolbar{position:absolute;background-color:var(--gjs-color-blue);white-space:nowrap;color:#fff;z-index:10;top:0;left:0}.gjs-toolbar-item{width:26px;padding:5px;cursor:pointer;display:inline-block}.gjs-toolbar-item svg{fill:currentColor;vertical-align:middle}.gjs-resizer-c{position:absolute;left:0;top:0;width:100%;height:100%;z-index:9}.gjs-margin-v-el,.gjs-padding-v-el,.gjs-fixedmargin-v-el,.gjs-fixedpadding-v-el{opacity:.1;filter:alpha(opacity=10);position:absolute;background-color:#ff0}.gjs-fixedmargin-v-el,.gjs-fixedpadding-v-el{opacity:.2;filter:alpha(opacity=20)}.gjs-padding-v-el,.gjs-fixedpadding-v-el{background-color:navy}.gjs-resizer-h{pointer-events:all;position:absolute;border:3px solid var(--gjs-color-blue);width:10px;height:10px;background-color:#fff;margin:var(--gjs-handle-margin)}.gjs-resizer-h-tl{top:0;left:0;cursor:nwse-resize}.gjs-resizer-h-tr{top:0;right:0;cursor:nesw-resize}.gjs-resizer-h-tc{top:0;margin:var(--gjs-handle-margin) auto;left:0;right:0;cursor:ns-resize}.gjs-resizer-h-cl{left:0;margin:auto var(--gjs-handle-margin);top:0;bottom:0;cursor:ew-resize}.gjs-resizer-h-cr{margin:auto var(--gjs-handle-margin);top:0;bottom:0;right:0;cursor:ew-resize}.gjs-resizer-h-bl{bottom:0;left:0;cursor:nesw-resize}.gjs-resizer-h-bc{bottom:0;margin:var(--gjs-handle-margin) auto;left:0;right:0;cursor:ns-resize}.gjs-resizer-h-br{bottom:0;right:0;cursor:nwse-resize}.gjs-pn-panel .gjs-resizer-h{background-color:rgba(0,0,0,.2);border:none;opacity:0;transition:opacity .25s}.gjs-pn-panel .gjs-resizer-h:hover{opacity:1}.gjs-pn-panel .gjs-resizer-h-tc,.gjs-pn-panel .gjs-resizer-h-bc{margin:0 auto;width:100%}.gjs-pn-panel .gjs-resizer-h-cr,.gjs-pn-panel .gjs-resizer-h-cl{margin:auto 0;height:100%}.gjs-resizing .gjs-highlighter,.gjs-resizing .gjs-badge{display:none !important}.gjs-resizing-tl *{cursor:nwse-resize !important}.gjs-resizing-tr *{cursor:nesw-resize !important}.gjs-resizing-tc *{cursor:ns-resize !important}.gjs-resizing-cl *{cursor:ew-resize !important}.gjs-resizing-cr *{cursor:ew-resize !important}.gjs-resizing-bl *{cursor:nesw-resize !important}.gjs-resizing-bc *{cursor:ns-resize !important}.gjs-resizing-br *{cursor:nwse-resize !important}.btn-cl,.gjs-am-close,.gjs-mdl-btn-close{opacity:.3;filter:alpha(opacity=30);font-size:25px;cursor:pointer}.btn-cl:hover,.gjs-am-close:hover,.gjs-mdl-btn-close:hover{opacity:.7;filter:alpha(opacity=70)}.no-dots,.ui-resizable-handle{border:none !important;margin:0 !important;outline:none !important}.gjs-com-dashed *{outline:1px dashed #888;outline-offset:-2px;box-sizing:border-box}.gjs-com-badge,.gjs-badge{pointer-events:none;background-color:var(--gjs-color-blue);color:#fff;padding:2px 5px;position:absolute;z-index:1;font-size:12px;outline:none;display:none}.gjs-badge-warning{background-color:var(--gjs-color-yellow)}.gjs-placeholder,.gjs-com-placeholder,.gjs-placeholder{position:absolute;z-index:10;pointer-events:none;display:none}.gjs-placeholder,.gjs-placeholder{border-style:solid !important;outline:none;box-sizing:border-box;transition:top var(--gjs-animation-duration),left var(--gjs-animation-duration),width var(--gjs-animation-duration),height var(--gjs-animation-duration)}.gjs-placeholder.horizontal,.gjs-com-placeholder.horizontal,.gjs-placeholder.horizontal{border-color:transparent var(--gjs-placeholder-background-color);border-width:3px 5px;margin:-3px 0 0}.gjs-placeholder.vertical,.gjs-com-placeholder.vertical,.gjs-placeholder.vertical{border-color:var(--gjs-placeholder-background-color) transparent;border-width:5px 3px;margin:0 0 0 -3px}.gjs-placeholder-int,.gjs-com-placeholder-int,.gjs-placeholder-int{background-color:var(--gjs-placeholder-background-color);box-shadow:0 0 3px rgba(0,0,0,.2);height:100%;width:100%;pointer-events:none;padding:1.5px;outline:none}.gjs-pn-panel{display:inline-block;position:absolute;box-sizing:border-box;text-align:center;padding:5px;z-index:3}.gjs-pn-panel .icon-undo,.gjs-pn-panel .icon-redo{font-size:20px;height:30px;width:25px}.gjs-pn-commands{width:calc(100% - var(--gjs-left-width));left:0;top:0;box-shadow:0 0 5px var(--gjs-main-dark-color)}.gjs-pn-options{right:var(--gjs-left-width);top:0}.gjs-pn-views{border-bottom:2px solid var(--gjs-main-dark-color);right:0;width:var(--gjs-left-width);z-index:4}.gjs-pn-views-container{height:100%;padding:42px 0 0;right:0;width:var(--gjs-left-width);overflow:auto;box-shadow:0 0 5px var(--gjs-main-dark-color)}.gjs-pn-buttons{align-items:center;display:flex;justify-content:space-between}.gjs-pn-btn{box-sizing:border-box;min-height:30px;min-width:30px;line-height:21px;background-color:transparent;border:none;font-size:18px;margin-right:5px;border-radius:2px;padding:4px;position:relative;cursor:pointer}.gjs-pn-btn.gjs-pn-active{background-color:rgba(0,0,0,.15);box-shadow:0 0 3px rgba(0,0,0,.25) inset}.gjs-pn-btn svg{fill:currentColor}.gjs-label{line-height:18px}.gjs-fields{display:flex}.gjs-select{padding:0;width:100%}.gjs-select select{padding-right:10px}.gjs-select:-moz-focusring,.gjs-select select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--gjs-secondary-light-color)}.gjs-input:focus,.gjs-button:focus,.gjs-btn-prim:focus,.gjs-select:focus,.gjs-select select:focus{outline:none}.gjs-field input,.gjs-field select,.gjs-field textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;border:none;background-color:transparent;box-sizing:border-box;width:100%;position:relative;padding:var(--gjs-input-padding);z-index:1}.gjs-field input:focus,.gjs-field select:focus,.gjs-field textarea:focus{outline:none}.gjs-field input[type=number]{-moz-appearance:textfield}.gjs-field input[type=number]::-webkit-outer-spin-button,.gjs-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gjs-field-range{flex:9 1 auto}.gjs-field-integer input{padding-right:30px}.gjs-select option,.gjs-field-select option,.gjs-clm-select option,.gjs-sm-select option,.gjs-fields option,.gjs-sm-unit option{background-color:var(--gjs-main-color);color:var(--gjs-font-color)}.gjs-field{background-color:var(--gjs-main-dark-color);border:none;box-shadow:none;border-radius:2px;box-sizing:border-box;padding:0;position:relative}.gjs-field textarea{resize:vertical}.gjs-field .gjs-sel-arrow{height:100%;width:9px;position:absolute;right:0;top:0;z-index:0}.gjs-field .gjs-d-s-arrow{bottom:0;top:0;margin:auto;right:var(--gjs-input-padding);border-top:4px solid var(--gjs-arrow-color);position:absolute;height:0;width:0;border-left:3px solid transparent;border-right:4px solid transparent;cursor:pointer}.gjs-field-arrows{position:absolute;cursor:ns-resize;margin:auto;height:20px;width:9px;z-index:10;bottom:0;right:calc(var(--gjs-input-padding) - 2px);top:0}.gjs-field-color,.gjs-field-radio{width:100%}.gjs-field-color input{padding-right:var(--gjs-color-input-padding);box-sizing:border-box}.gjs-field-colorp{border-left:1px solid var(--gjs-main-dark-color);box-sizing:border-box;height:100%;padding:2px;position:absolute;right:0;top:0;width:var(--gjs-color-input-padding);z-index:10}.gjs-field-colorp .gjs-checker-bg,.gjs-field-colorp .gjs-field-colorp-c{height:100%;width:100%;border-radius:1px}.gjs-field-colorp-c{height:100%;position:relative;width:100%}.gjs-field-color-picker{background-color:var(--gjs-font-color);cursor:pointer;height:100%;width:100%;box-shadow:0 0 1px var(--gjs-main-dark-color);border-radius:1px;position:absolute;top:0}.gjs-field-checkbox{padding:0;width:17px;height:17px;display:block;cursor:pointer}.gjs-field-checkbox input{display:none}.gjs-field-checkbox input:checked+.gjs-chk-icon{border-color:rgba(255,255,255,.5);border-width:0 2px 2px 0;border-style:solid}.gjs-radio-item{flex:1 1 auto;text-align:center;border-left:1px solid var(--gjs-dark-text-shadow)}.gjs-radio-item:first-child{border:none}.gjs-radio-item:hover{background:var(--gjs-main-dark-color)}.gjs-radio-item input{display:none}.gjs-radio-item input:checked+.gjs-radio-item-label{background-color:rgba(255,255,255,.2)}.gjs-radio-items{display:flex}.gjs-radio-item-label{cursor:pointer;display:block;padding:var(--gjs-input-padding)}.gjs-field-units{position:absolute;margin:auto;right:10px;bottom:0;top:0}.gjs-field-unit{position:absolute;right:10px;top:3px;font-size:10px;color:var(--gjs-arrow-color);cursor:pointer}.gjs-input-unit{text-align:center}.gjs-field-arrow-u,.gjs-field-arrow-d{position:absolute;height:0;width:0;border-left:3px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--gjs-arrow-color);bottom:4px;cursor:pointer}.gjs-field-arrow-u{border-bottom:4px solid var(--gjs-arrow-color);border-top:none;top:4px}.gjs-field-select{padding:0}.gjs-field-range{background-color:transparent;border:none;box-shadow:none;padding:0}.gjs-field-range input{margin:0;height:100%}.gjs-field-range input:focus{outline:none}.gjs-field-range input::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;height:10px;width:10px;border:1px solid var(--gjs-main-dark-color);border-radius:100%;background-color:var(--gjs-font-color);cursor:pointer}.gjs-field-range input::-moz-range-thumb{height:10px;width:10px;border:1px solid var(--gjs-main-dark-color);border-radius:100%;background-color:var(--gjs-font-color);cursor:pointer}.gjs-field-range input::-ms-thumb{height:10px;width:10px;border:1px solid var(--gjs-main-dark-color);border-radius:100%;background-color:var(--gjs-font-color);cursor:pointer}.gjs-field-range input::-moz-range-track{background-color:var(--gjs-main-dark-color);border-radius:1px;margin-top:3px;height:3px}.gjs-field-range input::-webkit-slider-runnable-track{background-color:var(--gjs-main-dark-color);border-radius:1px;margin-top:3px;height:3px}.gjs-field-range input::-ms-track{background-color:var(--gjs-main-dark-color);border-radius:1px;margin-top:3px;height:3px}.gjs-btn-prim{color:inherit;background-color:var(--gjs-main-light-color);border-radius:2px;padding:3px 6px;padding:var(--gjs-input-padding);cursor:pointer;border:none}.gjs-btn-prim:active{background-color:var(--gjs-main-light-color)}.gjs-btn--full{width:100%}.gjs-chk-icon{transform:rotate(45deg);box-sizing:border-box;display:block;height:14px;margin:0 5px;width:6px}.gjs-add-trasp{background:none;border:none;color:var(--gjs-font-color);cursor:pointer;font-size:1em;border-radius:2px;opacity:.75;filter:alpha(opacity=75)}.gjs-add-trasp:hover{opacity:1;filter:alpha(opacity=100)}.gjs-add-trasp:active{background-color:rgba(0,0,0,.2)}.gjs-devices-c{display:flex;align-items:center;padding:2px 3px 3px 3px}.gjs-devices-c .gjs-device-label{flex-grow:2;text-align:left;margin-right:10px}.gjs-devices-c .gjs-select{flex-grow:20}.gjs-devices-c .gjs-add-trasp{flex-grow:1;margin-left:5px}.gjs-category-open,.gjs-block-category.gjs-open,.gjs-sm-sector.gjs-sm-open,.gjs-trait-category.gjs-open{border-bottom:1px solid rgba(0,0,0,.25)}.gjs-category-title,.gjs-layer-title,.gjs-block-category .gjs-title,.gjs-sm-sector-title,.gjs-trait-category .gjs-title{font-weight:lighter;background-color:var(--gjs-secondary-dark-color);letter-spacing:1px;padding:9px 10px 9px 20px;border-bottom:1px solid rgba(0,0,0,.25);text-align:left;position:relative;cursor:pointer}.gjs-sm-clear{cursor:pointer;width:14px;min-width:14px;height:14px;margin-left:3px}.gjs-sm-header{font-weight:lighter;padding:10px}.gjs-sm-sector{clear:both;font-weight:lighter;text-align:left}.gjs-sm-sector-title{display:flex;align-items:center}.gjs-sm-sector-caret{width:17px;height:17px;min-width:17px;transform:rotate(-90deg)}.gjs-sm-sector-label{margin-left:5px}.gjs-sm-sector.gjs-sm-open .gjs-sm-sector-caret{transform:none}.gjs-sm-properties{font-size:var(--gjs-font-size);padding:10px 5px;display:flex;flex-wrap:wrap;align-items:flex-end;box-sizing:border-box;width:100%}.gjs-sm-label{margin:5px 5px 3px 0;display:flex;align-items:center}.gjs-sm-close-btn,.gjs-sm-preview-file-close{display:block;font-size:23px;position:absolute;cursor:pointer;right:5px;top:0;opacity:.7;filter:alpha(opacity=70)}.gjs-sm-close-btn:hover,.gjs-sm-preview-file-close:hover{opacity:.9;filter:alpha(opacity=90)}.gjs-sm-field,.gjs-clm-select,.gjs-clm-field{width:100%;position:relative}.gjs-sm-field input,.gjs-clm-select input,.gjs-clm-field input,.gjs-sm-field select,.gjs-clm-select select,.gjs-clm-field select{background-color:transparent;color:rgba(255,255,255,.7);border:none;width:100%}.gjs-sm-field input,.gjs-clm-select input,.gjs-clm-field input{box-sizing:border-box}.gjs-sm-field select,.gjs-clm-select select,.gjs-clm-field select{position:relative;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none}.gjs-sm-field select::-ms-expand,.gjs-clm-select select::-ms-expand,.gjs-clm-field select::-ms-expand{display:none}.gjs-sm-field select:-moz-focusring,.gjs-clm-select select:-moz-focusring,.gjs-clm-field select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--gjs-secondary-light-color)}.gjs-sm-field input:focus,.gjs-clm-select input:focus,.gjs-clm-field input:focus,.gjs-sm-field select:focus,.gjs-clm-select select:focus,.gjs-clm-field select:focus{outline:none}.gjs-sm-field .gjs-sm-unit,.gjs-clm-select .gjs-sm-unit,.gjs-clm-field .gjs-sm-unit{position:absolute;right:10px;top:3px;font-size:10px;color:var(--gjs-secondary-light-color);cursor:pointer}.gjs-sm-field .gjs-clm-sel-arrow,.gjs-clm-select .gjs-clm-sel-arrow,.gjs-clm-field .gjs-clm-sel-arrow,.gjs-sm-field .gjs-sm-int-arrows,.gjs-clm-select .gjs-sm-int-arrows,.gjs-clm-field .gjs-sm-int-arrows,.gjs-sm-field .gjs-sm-sel-arrow,.gjs-clm-select .gjs-sm-sel-arrow,.gjs-clm-field .gjs-sm-sel-arrow{height:100%;width:9px;position:absolute;right:0;top:0;cursor:ns-resize}.gjs-sm-field .gjs-sm-sel-arrow,.gjs-clm-select .gjs-sm-sel-arrow,.gjs-clm-field .gjs-sm-sel-arrow{cursor:pointer}.gjs-sm-field .gjs-clm-d-s-arrow,.gjs-clm-select .gjs-clm-d-s-arrow,.gjs-clm-field .gjs-clm-d-s-arrow,.gjs-sm-field .gjs-sm-d-arrow,.gjs-clm-select .gjs-sm-d-arrow,.gjs-clm-field .gjs-sm-d-arrow,.gjs-sm-field .gjs-sm-d-s-arrow,.gjs-clm-select .gjs-sm-d-s-arrow,.gjs-clm-field .gjs-sm-d-s-arrow,.gjs-sm-field .gjs-sm-u-arrow,.gjs-clm-select .gjs-sm-u-arrow,.gjs-clm-field .gjs-sm-u-arrow{position:absolute;height:0;width:0;border-left:3px solid transparent;border-right:4px solid transparent;cursor:pointer}.gjs-sm-field .gjs-sm-u-arrow,.gjs-clm-select .gjs-sm-u-arrow,.gjs-clm-field .gjs-sm-u-arrow{border-bottom:4px solid var(--gjs-secondary-light-color);top:4px}.gjs-sm-field .gjs-clm-d-s-arrow,.gjs-clm-select .gjs-clm-d-s-arrow,.gjs-clm-field .gjs-clm-d-s-arrow,.gjs-sm-field .gjs-sm-d-arrow,.gjs-clm-select .gjs-sm-d-arrow,.gjs-clm-field .gjs-sm-d-arrow,.gjs-sm-field .gjs-sm-d-s-arrow,.gjs-clm-select .gjs-sm-d-s-arrow,.gjs-clm-field .gjs-sm-d-s-arrow{border-top:4px solid var(--gjs-secondary-light-color);bottom:4px}.gjs-sm-field .gjs-clm-d-s-arrow,.gjs-clm-select .gjs-clm-d-s-arrow,.gjs-clm-field .gjs-clm-d-s-arrow,.gjs-sm-field .gjs-sm-d-s-arrow,.gjs-clm-select .gjs-sm-d-s-arrow,.gjs-clm-field .gjs-sm-d-s-arrow{bottom:7px}.gjs-sm-field.gjs-sm-color,.gjs-sm-color.gjs-clm-field,.gjs-sm-field.gjs-sm-input,.gjs-sm-input.gjs-clm-field,.gjs-sm-field.gjs-sm-integer,.gjs-sm-integer.gjs-clm-field,.gjs-sm-field.gjs-sm-list,.gjs-sm-list.gjs-clm-field,.gjs-sm-field.gjs-sm-select,.gjs-clm-select,.gjs-sm-select.gjs-clm-field{background-color:var(--gjs-main-dark-color);border:1px solid rgba(0,0,0,.1);box-shadow:1px 1px 0 var(--gjs-main-light-color);color:var(--gjs-secondary-light-color);border-radius:2px;box-sizing:border-box;padding:0 5px}.gjs-sm-field.gjs-sm-composite,.gjs-sm-composite.gjs-clm-select,.gjs-sm-composite.gjs-clm-field{border-radius:2px}.gjs-sm-field.gjs-sm-select,.gjs-clm-select,.gjs-sm-select.gjs-clm-field{padding:0}.gjs-sm-field.gjs-sm-select select,.gjs-clm-select select,.gjs-sm-select.gjs-clm-field select{height:20px}.gjs-sm-field.gjs-sm-select option,.gjs-clm-select option,.gjs-sm-select.gjs-clm-field option{padding:3px 0}.gjs-sm-field.gjs-sm-composite,.gjs-sm-composite.gjs-clm-select,.gjs-sm-composite.gjs-clm-field{background-color:var(--gjs-secondary-dark-color);border:1px solid rgba(0,0,0,.25)}.gjs-sm-field.gjs-sm-list,.gjs-sm-list.gjs-clm-select,.gjs-sm-list.gjs-clm-field{width:auto;padding:0;overflow:hidden;float:left}.gjs-sm-field.gjs-sm-list input,.gjs-sm-list.gjs-clm-select input,.gjs-sm-list.gjs-clm-field input{display:none}.gjs-sm-field.gjs-sm-list label,.gjs-sm-list.gjs-clm-select label,.gjs-sm-list.gjs-clm-field label{cursor:pointer;padding:5px;display:block}.gjs-sm-field.gjs-sm-list .gjs-sm-radio:checked+label,.gjs-sm-list.gjs-clm-select .gjs-sm-radio:checked+label,.gjs-sm-list.gjs-clm-field .gjs-sm-radio:checked+label{background-color:rgba(255,255,255,.2)}.gjs-sm-field.gjs-sm-list .gjs-sm-icon,.gjs-sm-list.gjs-clm-select .gjs-sm-icon,.gjs-sm-list.gjs-clm-field .gjs-sm-icon{background-repeat:no-repeat;background-position:center;text-shadow:none;line-height:normal}.gjs-sm-field.gjs-sm-integer select,.gjs-sm-integer.gjs-clm-select select,.gjs-sm-integer.gjs-clm-field select{width:auto;padding:0}.gjs-sm-list .gjs-sm-el{float:left;border-left:1px solid var(--gjs-main-dark-color)}.gjs-sm-list .gjs-sm-el:first-child{border:none}.gjs-sm-list .gjs-sm-el:hover{background:var(--gjs-main-dark-color)}.gjs-sm-slider .gjs-field-integer{flex:1 1 65px}.gjs-sm-property{box-sizing:border-box;float:left;width:50%;margin-bottom:5px;padding:0 5px}.gjs-sm-property--full,.gjs-sm-property.gjs-sm-composite,.gjs-sm-property.gjs-sm-file,.gjs-sm-property.gjs-sm-list,.gjs-sm-property.gjs-sm-stack,.gjs-sm-property.gjs-sm-slider,.gjs-sm-property.gjs-sm-color{width:100%}.gjs-sm-property .gjs-sm-btn{background-color:color-mix(in srgb, var(--gjs-main-dark-color), white 13%);border-radius:2px;box-shadow:1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 2%),1px 1px 0 color-mix(in srgb, var(--gjs-main-dark-color), white 17%) inset;padding:5px;position:relative;text-align:center;height:auto;width:100%;cursor:pointer;color:var(--gjs-font-color);box-sizing:border-box;text-shadow:-1px -1px 0 var(--gjs-main-dark-color);border:none;opacity:.85;filter:alpha(opacity=85)}.gjs-sm-property .gjs-sm-btn-c{box-sizing:border-box;float:left;width:100%}.gjs-sm-property__text-shadow .gjs-sm-layer-preview-cnt::after{color:#000;content:"T";font-weight:900;line-height:17px;padding:0 4px}.gjs-sm-preview-file{background-color:var(--gjs-light-border);border-radius:2px;margin-top:5px;position:relative;overflow:hidden;border:1px solid color-mix(in srgb, var(--gjs-light-border), black 1%);padding:3px 20px}.gjs-sm-preview-file-cnt{background-size:auto 100%;background-repeat:no-repeat;background-position:center center;height:50px}.gjs-sm-preview-file-close{top:-5px;width:14px;height:14px}.gjs-sm-layers{margin-top:5px;padding:1px 3px;min-height:30px}.gjs-sm-layer{background-color:rgba(255,255,255,.055);border-radius:2px;margin:2px 0;padding:7px;position:relative}.gjs-sm-layer.gjs-sm-active{background-color:rgba(255,255,255,.12)}.gjs-sm-layer .gjs-sm-label-wrp{display:flex;align-items:center}.gjs-sm-layer #gjs-sm-move{height:14px;width:14px;min-width:14px;cursor:grab}.gjs-sm-layer #gjs-sm-label{flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0 5px}.gjs-sm-layer-preview{height:15px;width:15px;min-width:15px;margin-right:5px;border-radius:2px}.gjs-sm-layer-preview-cnt{border-radius:2px;background-color:#fff;height:100%;width:100%;background-size:cover !important}.gjs-sm-layer #gjs-sm-close-layer{display:block;cursor:pointer;height:14px;width:14px;min-width:14px;opacity:.5;filter:alpha(opacity=50)}.gjs-sm-layer #gjs-sm-close-layer:hover{opacity:.8;filter:alpha(opacity=80)}.gjs-sm-stack .gjs-sm-properties{padding:5px 0 0}.gjs-sm-stack #gjs-sm-add{background:none;border:none;cursor:pointer;outline:none;position:absolute;right:0;top:-17px;opacity:.75;padding:0;width:18px;height:18px}.gjs-sm-stack #gjs-sm-add:hover{opacity:1;filter:alpha(opacity=100)}.gjs-sm-colorp-c{height:100%;width:20px;position:absolute;right:0;top:0;box-sizing:border-box;border-radius:2px;padding:2px}.gjs-sm-colorp-c .gjs-checker-bg,.gjs-sm-colorp-c .gjs-field-colorp-c{height:100%;width:100%;border-radius:1px}.gjs-sm-color-picker{background-color:var(--gjs-font-color);cursor:pointer;height:16px;width:100%;margin-top:-16px;box-shadow:0 0 1px var(--gjs-main-dark-color);border-radius:1px}.gjs-sm-btn-upload #gjs-sm-upload{left:0;top:0;position:absolute;width:100%;opacity:0;cursor:pointer}.gjs-sm-btn-upload #gjs-sm-label{padding:2px 0}.gjs-sm-layer>#gjs-sm-move{opacity:.7;filter:alpha(opacity=70);cursor:move;font-size:12px;float:left;margin:0 5px 0 0}.gjs-sm-layer>#gjs-sm-move:hover{opacity:.9;filter:alpha(opacity=90)}.gjs-blocks-c{display:flex;flex-wrap:wrap;justify-content:flex-start}.gjs-block-categories{display:flex;flex-direction:column}.gjs-block-category{width:100%}.gjs-block-category .gjs-caret-icon{margin-right:5px}.gjs-block{-moz-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none;width:45%;min-width:45px;padding:1em;box-sizing:border-box;min-height:90px;cursor:all-scroll;font-size:11px;font-weight:lighter;text-align:center;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(0,0,0,.2);border-radius:3px;margin:10px 2.5% 5px;box-shadow:0 1px 0 0 rgba(0,0,0,.15);transition:all .2s ease 0s;transition-property:box-shadow,color}.gjs-block:hover{box-shadow:0 3px 4px 0 rgba(0,0,0,.15)}.gjs-block svg{fill:currentColor}.gjs-block__media{margin-bottom:10px;pointer-events:none}.gjs-block-svg{width:54px;fill:currentColor}.gjs-block-svg-path{fill:currentColor}.gjs-block.fa{font-size:2em;line-height:2em;padding:11px}.gjs-block-label{line-height:normal;font-size:.65rem;font-weight:normal;font-family:Helvetica,sans-serif;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.gjs-block.gjs-bdrag{width:auto;padding:0}.gjs-selected-parent{border:1px solid var(--gjs-color-yellow)}.gjs-opac50{opacity:.5;filter:alpha(opacity=50)}.gjs-layer{font-weight:lighter;text-align:left;position:relative;font-size:var(--gjs-font-size);display:grid}.gjs-layer-item{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid var(--gjs-main-dark-color);background-color:var(--gjs-secondary-dark-color);gap:var(--gjs-flex-item-gap);cursor:pointer}.gjs-layer-item-left,.gjs-layer-item-right{display:flex;align-items:center;gap:var(--gjs-flex-item-gap)}.gjs-layer-item-left{width:100%}.gjs-layer-hidden{opacity:.55;filter:alpha(opacity=55)}.gjs-layer-vis{box-sizing:content-box;cursor:pointer;z-index:1}.gjs-layer-vis-on,.gjs-layer-vis-off{display:flex;width:13px}.gjs-layer-vis-off{display:none}.gjs-layer-vis.gjs-layer-off .gjs-layer-vis-on{display:none}.gjs-layer-vis.gjs-layer-off .gjs-layer-vis-off{display:flex}.gjs-layer-caret{width:15px;cursor:pointer;box-sizing:content-box;transform:rotate(90deg);display:flex;opacity:.7;filter:alpha(opacity=70)}.gjs-layer-caret:hover{opacity:1;filter:alpha(opacity=100)}.gjs-layer.open>.gjs-layer-item .gjs-layer-caret{transform:rotate(180deg)}.gjs-layer-title{padding:0;display:flex;align-items:center;background-color:transparent !important;border-bottom:none}.gjs-layer-title-inn{align-items:center;position:relative;display:flex;gap:var(--gjs-flex-item-gap)}.gjs-layer-title-c{width:100%}.gjs-layer__icon{display:block;width:100%;max-width:15px;max-height:15px;padding-left:5px}.gjs-layer__icon svg{fill:currentColor}.gjs-layer-name{display:inline-block;box-sizing:content-box;overflow:hidden;white-space:nowrap;max-width:170px;height:auto}.gjs-layer-name--no-edit{text-overflow:ellipsis}.gjs-layer>.gjs-layer-children{display:none}.gjs-layer.open>.gjs-layer-children{display:block}.gjs-layer-no-chld>.gjs-layer-title-inn>.gjs-layer-caret{visibility:hidden}.gjs-layer-move{display:flex;width:13px;box-sizing:content-box;cursor:move}.gjs-layer.gjs-hovered .gjs-layer-item{background-color:var(--gjs-soft-light-color)}.gjs-layer.gjs-selected .gjs-layer-item{background-color:var(--gjs-main-light-color)}.gjs-layers{position:relative;height:100%}.gjs-layers #gjs-placeholder{width:100%;position:absolute}.gjs-layers #gjs-placeholder #gjs-plh-int{height:100%;padding:1px}.gjs-layers #gjs-placeholder #gjs-plh-int.gjs-insert{background-color:var(--gjs-color-green)}#gjs-clm-add-tag,.gjs-clm-tags-btn{background-color:rgba(255,255,255,.15);border-radius:2px;padding:3px;margin-right:3px;border:1px solid rgba(0,0,0,.15);width:24px;height:24px;box-sizing:border-box;cursor:pointer}.gjs-clm-tags-btn svg{fill:currentColor;display:block}.gjs-clm-header{display:flex;align-items:center;margin:7px 0}.gjs-clm-header-status{flex-shrink:1;margin-left:auto}.gjs-clm-tag{display:flex;overflow:hidden;align-items:center;border-radius:3px;margin:0 3px 3px 0;padding:5px;cursor:default}.gjs-clm-tag-status,.gjs-clm-tag-close{width:12px;height:12px;flex-shrink:1}.gjs-clm-tag-status svg,.gjs-clm-tag-close svg{vertical-align:middle;fill:currentColor}.gjs-clm-sels-info{margin:7px 0;text-align:left}.gjs-clm-sel-id{font-size:.9em;opacity:.5;filter:alpha(opacity=50)}.gjs-clm-label-sel{float:left;padding-right:5px}.gjs-clm-tags{font-size:var(--gjs-font-size);padding:10px 5px}.gjs-clm-tags #gjs-clm-sel{padding:7px 0;float:left;font-style:italic;margin-left:5px}.gjs-clm-tags #gjs-clm-tags-field{clear:both;padding:5px;margin-bottom:5px;display:flex;flex-wrap:wrap}.gjs-clm-tags #gjs-clm-tags-c{display:flex;flex-wrap:wrap;vertical-align:top;overflow:hidden}.gjs-clm-tags #gjs-clm-new{color:var(--gjs-font-color);padding:var(--gjs-padding-elem-classmanager);display:none}.gjs-clm-tags #gjs-clm-close{opacity:.85;filter:alpha(opacity=85);font-size:20px;line-height:0;cursor:pointer;color:rgba(255,255,255,.9)}.gjs-clm-tags #gjs-clm-close:hover{opacity:1;filter:alpha(opacity=100)}.gjs-clm-tags #gjs-clm-checkbox{color:rgba(255,255,255,.9);vertical-align:middle;cursor:pointer;font-size:9px}.gjs-clm-tags #gjs-clm-tag-label{flex-grow:1;text-overflow:ellipsis;overflow:hidden;padding:0 3px;cursor:text}.gjs-mdl-container{font-family:var(--gjs-main-font);overflow-y:auto;position:fixed;background-color:rgba(0,0,0,.5);display:flex;top:0;left:0;right:0;bottom:0;z-index:100}.gjs-mdl-dialog{text-shadow:-1px -1px 0 rgba(0,0,0,.05);animation:gjs-slide-down .215s;margin:auto;max-width:850px;width:90%;border-radius:3px;font-weight:lighter;position:relative;z-index:2}.gjs-mdl-title{font-size:1rem}.gjs-mdl-btn-close{position:absolute;right:15px;top:5px}.gjs-mdl-active .gjs-mdl-dialog{animation:gjs-mdl-slide-down .216s}.gjs-mdl-header,.gjs-mdl-content{padding:10px 15px;clear:both}.gjs-mdl-header{position:relative;border-bottom:1px solid var(--gjs-main-dark-color);padding:15px 15px 7px}.gjs-export-dl::after{content:"";clear:both;display:block;margin-bottom:10px}.gjs-dropzone{display:none;opacity:0;position:absolute;top:0;left:0;z-index:11;width:100%;height:100%;transition:opacity .25s;pointer-events:none}.gjs-dropzone-active .gjs-dropzone{display:block;opacity:1}.gjs-am-assets{height:290px;overflow:auto;clear:both;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start}.gjs-am-assets-header{padding:5px}.gjs-am-add-asset .gjs-am-add-field{width:70%;float:left}.gjs-am-add-asset button{width:25%;float:right}.gjs-am-preview-cont{position:relative;height:70px;width:30%;background-color:var(--gjs-main-color);border-radius:2px;float:left;overflow:hidden}.gjs-am-preview{position:absolute;background-position:center center;background-size:cover;background-repeat:no-repeat;height:100%;width:100%;z-index:1}.gjs-am-preview-bg{opacity:.5;filter:alpha(opacity=50);position:absolute;height:100%;width:100%;z-index:0}.gjs-am-dimensions{opacity:.5;filter:alpha(opacity=50);font-size:10px}.gjs-am-meta{width:70%;float:left;font-size:12px;padding:5px 0 0 5px;box-sizing:border-box}.gjs-am-meta>div{margin-bottom:5px}.gjs-am-close{cursor:pointer;position:absolute;right:5px;top:0;display:none}.gjs-am-asset{border-bottom:1px solid color-mix(in srgb, var(--gjs-main-dark-color), black 3%);padding:5px;cursor:pointer;position:relative;box-sizing:border-box;width:100%}.gjs-am-asset:hover .gjs-am-close{display:block}.gjs-am-highlight{background-color:var(--gjs-main-light-color)}.gjs-am-assets-cont{background-color:var(--gjs-secondary-dark-color);border-radius:3px;box-sizing:border-box;padding:10px;width:45%;float:right;height:325px;overflow:hidden}.gjs-am-file-uploader{width:55%;float:left}.gjs-am-file-uploader>form{background-color:var(--gjs-secondary-dark-color);border:2px dashed;border-radius:3px;position:relative;text-align:center;margin-bottom:15px}.gjs-am-file-uploader>form.gjs-am-hover{border:2px solid var(--gjs-color-green);color:color-mix(in srgb, var(--gjs-color-green), white 5%)}.gjs-am-file-uploader>form.gjs-am-disabled{border-color:red}.gjs-am-file-uploader>form #gjs-am-uploadFile{opacity:0;filter:alpha(opacity=0);padding:var(--gjs-upload-padding);width:100%;box-sizing:border-box}.gjs-am-file-uploader #gjs-am-title{position:absolute;padding:var(--gjs-upload-padding);width:100%}.gjs-cm-editor-c{float:left;box-sizing:border-box;width:50%}.gjs-cm-editor-c .CodeMirror{height:450px}.gjs-cm-editor{font-size:12px}.gjs-cm-editor#gjs-cm-htmlmixed{padding-right:10px;border-right:1px solid var(--gjs-main-dark-color)}.gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title{color:#a97d44}.gjs-cm-editor#gjs-cm-css{padding-left:10px}.gjs-cm-editor#gjs-cm-css #gjs-cm-title{color:#ddca7e}.gjs-cm-editor #gjs-cm-title{background-color:var(--gjs-main-dark-color);font-size:12px;padding:5px 10px 3px;text-align:right}.gjs-rte-toolbar{position:absolute;z-index:10}.gjs-rte-toolbar-ui{border:1px solid var(--gjs-main-dark-color);border-radius:3px}.gjs-rte-actionbar{display:flex}.gjs-rte-action{display:flex;align-items:center;justify-content:center;padding:5px;width:25px;border-right:1px solid var(--gjs-main-dark-color);text-align:center;cursor:pointer;outline:none}.gjs-rte-action:last-child{border-right:none}.gjs-rte-action:hover{background-color:var(--gjs-main-light-color)}.gjs-rte-active{background-color:var(--gjs-main-light-color)}.gjs-rte-disabled{color:var(--gjs-main-light-color);cursor:not-allowed}.gjs-rte-disabled:hover{background-color:unset}.gjs-editor-sp{border:1px solid var(--gjs-main-dark-color);box-shadow:0 0 7px var(--gjs-main-dark-color);border-radius:3px}.gjs-editor-sp .sp-hue,.gjs-editor-sp .sp-slider{cursor:row-resize}.gjs-editor-sp .sp-color,.gjs-editor-sp .sp-dragger{cursor:crosshair}.gjs-editor-sp .sp-alpha-inner,.gjs-editor-sp .sp-alpha-handle{cursor:col-resize}.gjs-editor-sp .sp-hue{left:90%}.gjs-editor-sp .sp-color{right:15%}.gjs-editor-sp .sp-picker-container{border:none}.gjs-editor-sp .colpick_dark .colpick_color{outline:1px solid var(--gjs-main-dark-color)}.gjs-editor-sp .sp-cancel,.gjs-editor-sp .sp-cancel:hover{bottom:-8px;color:#777 !important;font-size:25px;left:0;position:absolute;text-decoration:none}.gjs-editor-sp .sp-alpha-handle{background-color:#ccc;border:1px solid #555;width:4px}.gjs-editor-sp .sp-color,.gjs-editor-sp .sp-hue{border:1px solid #333}.gjs-editor-sp .sp-slider{background-color:#ccc;border:1px solid #555;height:3px;left:-4px;width:22px}.gjs-editor-sp .sp-dragger{background:transparent;box-shadow:0 0 0 1px #111}.gjs-editor-sp .sp-button-container{float:none;width:100%;position:relative;text-align:right}.gjs-editor-sp .sp-button-container .sp-choose,.gjs-editor-sp .sp-button-container .sp-choose:hover,.gjs-editor-sp .sp-button-container .sp-choose:active{background:var(--gjs-main-dark-color);border-color:var(--gjs-main-dark-color);color:var(--gjs-font-color);text-shadow:none;box-shadow:none;padding:3px 5px}.gjs-editor-sp .sp-palette-container{border:none;float:none;margin:0;padding:5px 10px 0}.gjs-editor-sp .sp-palette .sp-thumb-el,.gjs-editor-sp .sp-palette .sp-thumb-el:hover{border:1px solid rgba(0,0,0,.9)}.gjs-editor-sp .sp-palette .sp-thumb-el:hover,.gjs-editor-sp .sp-palette .sp-thumb-el.sp-thumb-active{border-color:rgba(0,0,0,.9)}.gjs-hidden{display:none}@keyframes gjs-slide-down{0%{transform:translate(0, -3rem);opacity:0}100%{transform:translate(0, 0);opacity:1}}@keyframes gjs-slide-up{0%{transform:translate(0, 0);opacity:1}100%{transform:translate(0, -3rem);opacity:0}}.cm-s-hopscotch span.cm-error{color:#fff}
/**
 * GrapesJS UI theme overrides for Quill.
 *
 * All rules reference Quill's CSS custom properties (defined in index.css
 * under [data-theme="light"] / [data-theme="dark"]). When the user toggles
 * theme, the variables update and the GrapesJS UI follows automatically —
 * no JS hook needed.
 */

/* —— Core surfaces —— */
.gjs-one-bg { background-color: var(--panel) !important; }
.gjs-two-color { color: var(--t2) !important; }
.gjs-three-bg { background-color: var(--acc) !important; }
.gjs-four-color,
.gjs-four-color-h:hover { color: var(--acc) !important; }

/* Font family — make every GrapesJS chrome surface use Quill's UI font
   (Sora). The canvas iframe is unaffected (it has its own document). This is
   scoped to the editor root + its non-canvas panels so the page being edited
   keeps whatever font the user authored. */
.quill-grapes-root,
.gjs-pn-panel,
.gjs-sm-sector,
.gjs-clm-tags,
.gjs-layers,
.gjs-trt-traits,
.gjs-blocks-c,
.gjs-mdl-dialog {
  font-family: var(--font-ui) !important;
}

/* Canvas backdrop — slightly recessed so the white page reads as a sheet */
.gjs-cv-canvas { background: var(--surf2) !important; }

/* Make the canvas iframe fill the editor area, matching the preview mode's
   full-bleed iframe. Removes the gray padding around the page so the
   visual editor occupies the same screen space as preview. */
.gjs-cv-canvas,
.gjs-cv-canvas > *,
.gjs-cv-canvas iframe {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* Canvas iframe scrollbar — GrapesJS manages canvas scroll internally, so
   hide the iframe's own scrollbar to avoid a stray vertical bar in the
   right blank strip (now eliminated by width:100%, kept as a safety net). */
.gjs-cv-canvas iframe::-webkit-scrollbar { display: none; }
.gjs-cv-canvas iframe { scrollbar-width: none; -ms-overflow-style: none; }

/* Right-panel (styles / layers / traits) scrollbar hide — scroll still
   works, only the visible gutter is removed for a cleaner editor chrome.
   The class is applied to the two scrollable React-owned containers in
   GrapesEditor.tsx (selector strip + tab body). */
.quill-no-scrollbar::-webkit-scrollbar { display: none; }
.quill-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* —— Block library tiles —— */
.gjs-block {
  background: var(--surf) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 8px !important;
  color: var(--t2) !important;
  padding: 6px 8px !important;
  transition: background-color 100ms ease, border-color 100ms ease;
}
.gjs-block:hover {
  background: var(--hov) !important;
  border-color: var(--acc) !important;
}
.gjs-block-label { color: var(--t3) !important; font-size: 11px !important; }
.gjs-blocks-c { background: transparent !important; }
.gjs-block-category { color: var(--t3) !important; font-size: 11px !important; }
.gjs-blocks-svg { fill: var(--t3) !important; }

/* —— Form fields / inputs —— */
.gjs-field {
  background: var(--inp) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 6px !important;
  color: var(--t1) !important;
}
.gjs-field input,
.gjs-field select,
.gjs-field textarea {
  color: var(--t1) !important;
  background: transparent !important;
}
.gjs-field input:focus,
.gjs-field select:focus { border-color: var(--acc) !important; outline: none !important; }
/* Select dropdown options — match Quill's .settings-select option styling so
   the open menu reads native rather than browser-default white-on-black. */
.gjs-field select option { background: var(--panel) !important; color: var(--t1) !important; }
.gjs-field-arrow { border-top-color: var(--t3) !important; }
.gjs-field-checkbox { background: var(--inp) !important; border: 1px solid var(--brd) !important; }
.gjs-field-checkbox input:checked + .gjs-chk-icon { background: var(--acc) !important; }

/* —— Style Manager —— */
.gjs-sm-sector .gjs-sm-sector-title,
.gjs-sm-sector .gjs-sm-sector-title b,
.gjs-sm-sector .gjs-sm-sector-title > * {
  background: var(--surf2) !important;
  color: var(--t1) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.gjs-sm-sector .gjs-sm-sector-title:hover,
.gjs-sm-sector .gjs-sm-sector-title:hover b { color: var(--acc) !important; }
.gjs-sm-label { color: var(--t2) !important; font-size: 11px !important; }
.gjs-sm-property { border-bottom-color: var(--brd) !important; }
.gjs-sm-stack #gjs-sm-add { color: var(--acc) !important; }

/* Color picker swatch in Style Manager */
.gjs-sm-color { background: var(--inp) !important; border-color: var(--brd) !important; }
.gjs-field-color-picker { background: var(--inp) !important; border-color: var(--brd) !important; }

/* —— Selectors / SelectorManager —— */
.gjs-clm-tags { background: var(--panel) !important; }
.gjs-clm-tag { background: var(--accdim) !important; color: var(--acc) !important; }
.gjs-clm-tag__close { color: var(--t3) !important; }

/* —— Layer Manager —— */
.gjs-layers { background: var(--panel) !important; color: var(--t2) !important; }
.gjs-layer { border-bottom-color: var(--brd) !important; }
.gjs-layer-name { color: var(--t2) !important; }
.gjs-layer.gjs-selected { background: var(--accdim) !important; }
.gjs-layer.gjs-selected .gjs-layer-name { color: var(--acc) !important; }
.gjs-layer-vis { color: var(--t3) !important; }

/* —— Trait Manager —— */
/* Force every text element in the trait panel to 11px so it matches the
   style panel. GrapesJS scatters font-size across .gjs-field, .gjs-field
   input, .gjs-trt-trait__title, etc.; a scoped wildcard is the only
   reliable override. */
.gjs-trt-traits,
.gjs-trt-traits *,
.gjs-trt-traits .gjs-field,
.gjs-trt-traits .gjs-field input,
.gjs-trt-traits .gjs-field select,
.gjs-trt-traits .gjs-field textarea,
.gjs-trt-traits .gjs-field option {
  font-size: 11px !important;
  color: var(--t2) !important;
}
.gjs-trt-trait__title { color: var(--t2) !important; font-weight: 500 !important; }
.gjs-trt-trait input,
.gjs-trt-trait select,
.gjs-trt-trait textarea { color: var(--t1) !important; }

/* —— Selection / hover overlays on canvas —— */
.gjs-selected { outline: 2px solid var(--acc) !important; }
.gjs-hovered { outline: 1px dashed var(--acc) !important; }
.gjs-toolbar { background: var(--acc) !important; border-radius: 4px !important; }
.gjs-toolbar-item { color: #fff !important; }
.gjs-toolbar-item:hover { background: var(--acc2) !important; }

/* —— Modal (Code / Import dialogs) —— */
/* Mirror Quill's .dlg-overlay / .dlg tokens: same 0.45 overlay opacity, same
   14px dialog radius, same panel border + drop shadow, surf2 header strip. */
.gjs-mdl-bg { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(4px) !important; }
.gjs-mdl-dialog {
  background: var(--panel) !important;
  border: 1px solid var(--brd) !important;
  border-radius: 14px !important;
  color: var(--t1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}
.gjs-mdl-header {
  background: var(--surf2) !important;
  color: var(--t1) !important;
  border-bottom: 1px solid var(--brd) !important;
}
.gjs-mdl-title { color: var(--t1) !important; font-size: 15px !important; font-weight: 600 !important; }
.gjs-mdl-close { color: var(--t3) !important; }
.gjs-mdl-close:hover { background: var(--hov) !important; color: var(--t1) !important; }

/* —— Devices switcher (used in custom toolbar) —— */
.gjs-devices-c { background: var(--panel) !important; }

/* —— Block / Layers / Style-manager panel scrollbars —— */
.gjs-blocks-c,
.gjs-layers,
.gjs-sm-sector__props,
.gjs-clm-tags,
.gjs-trt-traits {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gjs-blocks-c::-webkit-scrollbar,
.gjs-layers::-webkit-scrollbar,
.gjs-sm-sector__props::-webkit-scrollbar,
.gjs-clm-tags::-webkit-scrollbar,
.gjs-trt-traits::-webkit-scrollbar { display: none; }

/* Catch-all: hide scrollbars on every GrapesJS-owned scrollable surface
   inside the editor (canvas + right panel). Scrolling still works via
   wheel / trackpad; only the visible gutter is removed. This is the
   safety net for any gjs-* container not enumerated above. */
.quill-grapes-root ::-webkit-scrollbar { display: none !important; }
.quill-grapes-root * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* —— Trim default panel border radii so they sit flush in React shell —— */
.gjs-pn-panel { border-radius: 0 !important; }
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/@fs/Users/yiminlin/project/quill/node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.47"}.katex .katex-mathml{border:0;clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    -moz-user-select: none;
         user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::-moz-selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
  white-space: pre;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { -webkit-text-decoration: double underline; text-decoration: double underline; }
.xterm-underline-3 { -webkit-text-decoration: wavy underline; text-decoration: wavy underline; }
.xterm-underline-4 { -webkit-text-decoration: dotted underline; text-decoration: dotted underline; }
.xterm-underline-5 { -webkit-text-decoration: dashed underline; text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { -webkit-text-decoration: overline double underline; text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { -webkit-text-decoration: overline wavy underline; text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { -webkit-text-decoration: overline dotted underline; text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { -webkit-text-decoration: overline dashed underline; text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Sora:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=LXGW+WenKai:wght@400;500&display=swap');
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: DM Mono, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-bottom-px{
  bottom: -1px;
}
.-left-1\.5{
  left: -0.375rem;
}
.-left-\[3px\]{
  left: -3px;
}
.-left-\[4px\]{
  left: -4px;
}
.-right-1\.5{
  right: -0.375rem;
}
.-right-\[4px\]{
  right: -4px;
}
.-top-1\.5{
  top: -0.375rem;
}
.-top-9{
  top: -2.25rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-10{
  bottom: 2.5rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-4{
  bottom: 1rem;
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-0\.5{
  left: 0.125rem;
}
.left-1\/2{
  left: 50%;
}
.left-2{
  left: 0.5rem;
}
.left-2\.5{
  left: 0.625rem;
}
.left-3{
  left: 0.75rem;
}
.left-\[10px\]{
  left: 10px;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-2{
  right: 0.5rem;
}
.right-2\.5{
  right: 0.625rem;
}
.right-3{
  right: 0.75rem;
}
.right-4{
  right: 1rem;
}
.right-8{
  right: 2rem;
}
.top-0{
  top: 0px;
}
.top-0\.5{
  top: 0.125rem;
}
.top-1{
  top: 0.25rem;
}
.top-1\/2{
  top: 50%;
}
.top-10{
  top: 2.5rem;
}
.top-11{
  top: 2.75rem;
}
.top-2{
  top: 0.5rem;
}
.top-2\.5{
  top: 0.625rem;
}
.top-3{
  top: 0.75rem;
}
.top-\[34px\]{
  top: 34px;
}
.top-full{
  top: 100%;
}
.isolate{
  isolation: isolate;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[1000\]{
  z-index: 1000;
}
.z-\[1001\]{
  z-index: 1001;
}
.z-\[100\]{
  z-index: 100;
}
.z-\[120\]{
  z-index: 120;
}
.z-\[130\]{
  z-index: 130;
}
.z-\[1\]{
  z-index: 1;
}
.z-\[200\]{
  z-index: 200;
}
.z-\[45\]{
  z-index: 45;
}
.z-\[5\]{
  z-index: 5;
}
.z-\[950\]{
  z-index: 950;
}
.z-\[9999\]{
  z-index: 9999;
}
.m-0{
  margin: 0px;
}
.-mx-\[2px\]{
  margin-left: -2px;
  margin-right: -2px;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5{
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[18px\]{
  margin-left: 18px;
  margin-right: 18px;
}
.mx-\[3px\]{
  margin-left: 3px;
  margin-right: 3px;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-3\.5{
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-px{
  margin-top: 1px;
  margin-bottom: 1px;
}
.-mb-px{
  margin-bottom: -1px;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-3\.5{
  margin-bottom: 0.875rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.mb-\[13px\]{
  margin-bottom: 13px;
}
.mb-\[26px\]{
  margin-bottom: 26px;
}
.mb-\[3px\]{
  margin-bottom: 3px;
}
.mb-\[5px\]{
  margin-bottom: 5px;
}
.mb-\[9px\]{
  margin-bottom: 9px;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-2\.5{
  margin-left: 0.625rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-auto{
  margin-right: auto;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-3\.5{
  margin-top: 0.875rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-7{
  margin-top: 1.75rem;
}
.mt-\[1px\]{
  margin-top: 1px;
}
.mt-\[3px\]{
  margin-top: 3px;
}
.mt-\[6px\]{
  margin-top: 6px;
}
.mt-\[9px\]{
  margin-top: 9px;
}
.mt-px{
  margin-top: 1px;
}
.\!block{
  display: block !important;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.\!table{
  display: table !important;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.list-item{
  display: list-item;
}
.hidden{
  display: none;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-2{
  height: 0.5rem;
}
.h-20{
  height: 5rem;
}
.h-24{
  height: 6rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[11px\]{
  height: 11px;
}
.h-\[13px\]{
  height: 13px;
}
.h-\[14px\]{
  height: 14px;
}
.h-\[16px\]{
  height: 16px;
}
.h-\[180px\]{
  height: 180px;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[22px\]{
  height: 22px;
}
.h-\[24px\]{
  height: 24px;
}
.h-\[26px\]{
  height: 26px;
}
.h-\[28px\]{
  height: 28px;
}
.h-\[2px\]{
  height: 2px;
}
.h-\[30px\]{
  height: 30px;
}
.h-\[32px\]{
  height: 32px;
}
.h-\[34px\]{
  height: 34px;
}
.h-\[36px\]{
  height: 36px;
}
.h-\[3px\]{
  height: 3px;
}
.h-\[40px\]{
  height: 40px;
}
.h-\[44px\]{
  height: 44px;
}
.h-\[5px\]{
  height: 5px;
}
.h-\[640px\]{
  height: 640px;
}
.h-\[8px\]{
  height: 8px;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-auto{
  height: auto;
}
.h-dvh{
  height: 100dvh;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.max-h-32{
  max-height: 8rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-\[120px\]{
  max-height: 120px;
}
.max-h-\[200px\]{
  max-height: 200px;
}
.max-h-\[220px\]{
  max-height: 220px;
}
.max-h-\[240px\]{
  max-height: 240px;
}
.max-h-\[260px\]{
  max-height: 260px;
}
.max-h-\[280px\]{
  max-height: 280px;
}
.max-h-\[300px\]{
  max-height: 300px;
}
.max-h-\[320px\]{
  max-height: 320px;
}
.max-h-\[340px\]{
  max-height: 340px;
}
.max-h-\[42vh\]{
  max-height: 42vh;
}
.max-h-\[500px\]{
  max-height: 500px;
}
.max-h-\[55vh\]{
  max-height: 55vh;
}
.max-h-\[70vh\]{
  max-height: 70vh;
}
.max-h-\[75vh\]{
  max-height: 75vh;
}
.max-h-\[80px\]{
  max-height: 80px;
}
.max-h-\[85vh\]{
  max-height: 85vh;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.min-h-0{
  min-height: 0px;
}
.min-h-\[110px\]{
  min-height: 110px;
}
.min-h-\[32px\]{
  min-height: 32px;
}
.min-h-\[36px\]{
  min-height: 36px;
}
.min-h-\[48px\]{
  min-height: 48px;
}
.min-h-\[60px\]{
  min-height: 60px;
}
.min-h-\[60vh\]{
  min-height: 60vh;
}
.min-h-\[80px\]{
  min-height: 80px;
}
.min-h-full{
  min-height: 100%;
}
.w-0{
  width: 0px;
}
.w-0\.5{
  width: 0.125rem;
}
.w-1\.5{
  width: 0.375rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-20{
  width: 5rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-\[11px\]{
  width: 11px;
}
.w-\[13px\]{
  width: 13px;
}
.w-\[140px\]{
  width: 140px;
}
.w-\[14px\]{
  width: 14px;
}
.w-\[15px\]{
  width: 15px;
}
.w-\[16px\]{
  width: 16px;
}
.w-\[180px\]{
  width: 180px;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[190px\]{
  width: 190px;
}
.w-\[200px\]{
  width: 200px;
}
.w-\[220px\]{
  width: 220px;
}
.w-\[22px\]{
  width: 22px;
}
.w-\[240px\]{
  width: 240px;
}
.w-\[24px\]{
  width: 24px;
}
.w-\[260px\]{
  width: 260px;
}
.w-\[26px\]{
  width: 26px;
}
.w-\[2px\]{
  width: 2px;
}
.w-\[300px\]{
  width: 300px;
}
.w-\[30px\]{
  width: 30px;
}
.w-\[340px\]{
  width: 340px;
}
.w-\[360px\]{
  width: 360px;
}
.w-\[36px\]{
  width: 36px;
}
.w-\[3px\]{
  width: 3px;
}
.w-\[400px\]{
  width: 400px;
}
.w-\[420px\]{
  width: 420px;
}
.w-\[44px\]{
  width: 44px;
}
.w-\[460px\]{
  width: 460px;
}
.w-\[480px\]{
  width: 480px;
}
.w-\[50vw\]{
  width: 50vw;
}
.w-\[520px\]{
  width: 520px;
}
.w-\[560px\]{
  width: 560px;
}
.w-\[5px\]{
  width: 5px;
}
.w-\[600px\]{
  width: 600px;
}
.w-\[6px\]{
  width: 6px;
}
.w-\[760px\]{
  width: 760px;
}
.w-\[88px\]{
  width: 88px;
}
.w-\[90vw\]{
  width: 90vw;
}
.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-max{
  width: -moz-max-content;
  width: max-content;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[120px\]{
  min-width: 120px;
}
.min-w-\[140px\]{
  min-width: 140px;
}
.min-w-\[150px\]{
  min-width: 150px;
}
.min-w-\[160px\]{
  min-width: 160px;
}
.min-w-\[170px\]{
  min-width: 170px;
}
.min-w-\[180px\]{
  min-width: 180px;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[210px\]{
  min-width: 210px;
}
.min-w-\[220px\]{
  min-width: 220px;
}
.min-w-\[240px\]{
  min-width: 240px;
}
.min-w-\[248px\]{
  min-width: 248px;
}
.min-w-\[28px\]{
  min-width: 28px;
}
.min-w-\[300px\]{
  min-width: 300px;
}
.min-w-\[320px\]{
  min-width: 320px;
}
.min-w-\[34px\]{
  min-width: 34px;
}
.min-w-\[360px\]{
  min-width: 360px;
}
.min-w-\[420px\]{
  min-width: 420px;
}
.min-w-\[48px\]{
  min-width: 48px;
}
.min-w-\[60px\]{
  min-width: 60px;
}
.min-w-\[80px\]{
  min-width: 80px;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-\[110px\]{
  max-width: 110px;
}
.max-w-\[120px\]{
  max-width: 120px;
}
.max-w-\[160px\]{
  max-width: 160px;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[220px\]{
  max-width: 220px;
}
.max-w-\[240px\]{
  max-width: 240px;
}
.max-w-\[260px\]{
  max-width: 260px;
}
.max-w-\[280px\]{
  max-width: 280px;
}
.max-w-\[300px\]{
  max-width: 300px;
}
.max-w-\[320px\]{
  max-width: 320px;
}
.max-w-\[340px\]{
  max-width: 340px;
}
.max-w-\[360px\]{
  max-width: 360px;
}
.max-w-\[400px\]{
  max-width: 400px;
}
.max-w-\[420px\]{
  max-width: 420px;
}
.max-w-\[460px\]{
  max-width: 460px;
}
.max-w-\[500px\]{
  max-width: 500px;
}
.max-w-\[520px\]{
  max-width: 520px;
}
.max-w-\[60\%\]{
  max-width: 60%;
}
.max-w-\[640px\]{
  max-width: 640px;
}
.max-w-\[70\%\]{
  max-width: 70%;
}
.max-w-\[760px\]{
  max-width: 760px;
}
.max-w-\[780px\]{
  max-width: 780px;
}
.max-w-\[90vw\]{
  max-width: 90vw;
}
.max-w-\[92vw\]{
  max-width: 92vw;
}
.max-w-\[min\(560px\2c calc\(100\%-32px\)\)\]{
  max-width: min(560px, calc(100% - 32px));
}
.max-w-full{
  max-width: 100%;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink{
  flex-shrink: 1;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.grow{
  flex-grow: 1;
}
.border-collapse{
  border-collapse: collapse;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4{
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-\[fadeIn_\.12s\]{
  animation: fadeIn .12s;
}
.animate-\[fadeIn_\.15s\]{
  animation: fadeIn .15s;
}
.animate-\[slideUp_\.14s_ease\]{
  animation: slideUp .14s ease;
}
.animate-\[slideUp_\.15s_ease\]{
  animation: slideUp .15s ease;
}
.animate-\[slideUp_\.2s\]{
  animation: slideUp .2s;
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-col-resize{
  cursor: col-resize;
}
.cursor-crosshair{
  cursor: crosshair;
}
.cursor-default{
  cursor: default;
}
.cursor-ew-resize{
  cursor: ew-resize;
}
.cursor-grab{
  cursor: grab;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-row-resize{
  cursor: row-resize;
}
.cursor-zoom-in{
  cursor: zoom-in;
}
.cursor-zoom-out{
  cursor: zoom-out;
}
.touch-none{
  touch-action: none;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-text{
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.resize-none{
  resize: none;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-\[28px_1fr\]{
  grid-template-columns: 28px 1fr;
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(210px\2c 1fr\)\)\]{
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0{
  gap: 0px;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-7{
  gap: 1.75rem;
}
.gap-\[11px\]{
  gap: 11px;
}
.gap-\[18px\]{
  gap: 18px;
}
.gap-\[2px\]{
  gap: 2px;
}
.gap-\[3px\]{
  gap: 3px;
}
.gap-\[5px\]{
  gap: 5px;
}
.gap-\[7px\]{
  gap: 7px;
}
.gap-\[9px\]{
  gap: 9px;
}
.gap-px{
  gap: 1px;
}
.gap-x-1{
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.self-start{
  align-self: flex-start;
}
.self-center{
  align-self: center;
}
.self-stretch{
  align-self: stretch;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-visible{
  overflow: visible;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.overflow-y-hidden{
  overflow-y: hidden;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.whitespace-normal{
  white-space: normal;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-\[10px\]{
  border-radius: 10px;
}
.rounded-\[3px\]{
  border-radius: 3px;
}
.rounded-\[4px\]{
  border-radius: 4px;
}
.rounded-\[5px\]{
  border-radius: 5px;
}
.rounded-\[6px\]{
  border-radius: 6px;
}
.rounded-\[7px\]{
  border-radius: 7px;
}
.rounded-\[8px\]{
  border-radius: 8px;
}
.rounded-\[inherit\]{
  border-radius: inherit;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-l{
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-md{
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-r{
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-r-md{
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-t-md{
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.rounded-t-xl{
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-\[1\.5px\]{
  border-width: 1.5px;
}
.border-\[2\.5px\]{
  border-width: 2.5px;
}
.border-\[2px\]{
  border-width: 2px;
}
.border-\[3px\]{
  border-width: 3px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-0{
  border-left-width: 0px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-0{
  border-right-width: 0px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-none{
  border-style: none;
}
.border-\[\#e74c3c\]{
  --tw-border-opacity: 1;
  border-color: rgb(231 76 60 / var(--tw-border-opacity, 1));
}
.border-\[\#ef4444\]{
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-\[var\(--brd\)\]{
  border-color: var(--brd);
}
.border-acc{
  border-color: var(--acc);
}
.border-amber{
  border-color: var(--amber);
}
.border-brd{
  border-color: var(--brd);
}
.border-brd2{
  border-color: var(--brd2);
}
.border-red{
  border-color: var(--red);
}
.border-rose-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.\!border-b-acc{
  border-bottom-color: var(--acc) !important;
}
.border-b-transparent{
  border-bottom-color: transparent;
}
.border-l-transparent{
  border-left-color: transparent;
}
.border-r-brd2{
  border-right-color: var(--brd2);
}
.border-t-acc{
  border-top-color: var(--acc);
}
.bg-\[\#22c55e\]{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e74c3c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(231 76 60 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ef4444\]{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--bg\)\]{
  background-color: var(--bg);
}
.bg-\[var\(--brd2\)\]{
  background-color: var(--brd2);
}
.bg-\[var\(--hov\)\]{
  background-color: var(--hov);
}
.bg-\[var\(--surf\)\]{
  background-color: var(--surf);
}
.bg-\[var\(--surf2\)\]{
  background-color: var(--surf2);
}
.bg-acc{
  background-color: var(--acc);
}
.bg-accdim{
  background-color: var(--accdim);
}
.bg-accglow{
  background-color: var(--accglow);
}
.bg-act{
  background-color: var(--act);
}
.bg-amber{
  background-color: var(--amber);
}
.bg-bg{
  background-color: var(--bg);
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/35{
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/40{
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/45{
  background-color: rgb(0 0 0 / 0.45);
}
.bg-black\/70{
  background-color: rgb(0 0 0 / 0.7);
}
.bg-brd{
  background-color: var(--brd);
}
.bg-brd2{
  background-color: var(--brd2);
}
.bg-card{
  background-color: var(--card);
}
.bg-emerald-500\/15{
  background-color: rgb(16 185 129 / 0.15);
}
.bg-gray-500\/15{
  background-color: rgb(107 114 128 / 0.15);
}
.bg-hov{
  background-color: var(--hov);
}
.bg-inp{
  background-color: var(--inp);
}
.bg-orange-500\/15{
  background-color: rgb(249 115 22 / 0.15);
}
.bg-panel{
  background-color: var(--panel);
}
.bg-red{
  background-color: var(--red);
}
.bg-rose-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/15{
  background-color: rgb(244 63 94 / 0.15);
}
.bg-sky-500\/15{
  background-color: rgb(14 165 233 / 0.15);
}
.bg-surf{
  background-color: var(--surf);
}
.bg-surf2{
  background-color: var(--surf2);
}
.bg-t2{
  background-color: var(--t2);
}
.bg-transparent{
  background-color: transparent;
}
.bg-violet-500\/15{
  background-color: rgb(139 92 246 / 0.15);
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-100\/40{
  background-color: rgb(254 249 195 / 0.4);
}
.bg-yellow-100\/60{
  background-color: rgb(254 249 195 / 0.6);
}
.bg-yellow-400\/40{
  background-color: rgb(250 204 21 / 0.4);
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-none{
  background-image: none;
}
.from-acc{
  --tw-gradient-from: var(--acc) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-acc2{
  --tw-gradient-to: var(--acc2) var(--tw-gradient-to-position);
}
.box-decoration-clone{
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-\[11px\]{
  padding: 11px;
}
.p-\[15px\]{
  padding: 15px;
}
.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[11px\]{
  padding-left: 11px;
  padding-right: 11px;
}
.px-\[13px\]{
  padding-left: 13px;
  padding-right: 13px;
}
.px-\[14px\]{
  padding-left: 14px;
  padding-right: 14px;
}
.px-\[18px\]{
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[22px\]{
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[26px\]{
  padding-left: 26px;
  padding-right: 26px;
}
.px-\[5px\]{
  padding-left: 5px;
  padding-right: 5px;
}
.px-\[6px\]{
  padding-left: 6px;
  padding-right: 6px;
}
.px-\[7px\]{
  padding-left: 7px;
  padding-right: 7px;
}
.px-\[9px\]{
  padding-left: 9px;
  padding-right: 9px;
}
.px-px{
  padding-left: 1px;
  padding-right: 1px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[11px\]{
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-\[18px\]{
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[2px\]{
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-\[3px\]{
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[5px\]{
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-\[6px\]{
  padding-top: 6px;
  padding-bottom: 6px;
}
.py-\[7px\]{
  padding-top: 7px;
  padding-bottom: 7px;
}
.py-\[9px\]{
  padding-top: 9px;
  padding-bottom: 9px;
}
.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-0\.5{
  padding-bottom: 0.125rem;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-1\.5{
  padding-bottom: 0.375rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-2\.5{
  padding-bottom: 0.625rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-3\.5{
  padding-bottom: 0.875rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-\[80vh\]{
  padding-bottom: 80vh;
}
.pl-0{
  padding-left: 0px;
}
.pl-0\.5{
  padding-left: 0.125rem;
}
.pl-1\.5{
  padding-left: 0.375rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-2\.5{
  padding-left: 0.625rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-8{
  padding-left: 2rem;
}
.pl-\[30px\]{
  padding-left: 30px;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-14{
  padding-right: 3.5rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-2\.5{
  padding-right: 0.625rem;
}
.pr-3\.5{
  padding-right: 0.875rem;
}
.pr-7{
  padding-right: 1.75rem;
}
.pr-\[12px\]{
  padding-right: 12px;
}
.pr-\[34px\]{
  padding-right: 34px;
}
.pt-0\.5{
  padding-top: 0.125rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-2\.5{
  padding-top: 0.625rem;
}
.pt-20{
  padding-top: 5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-3\.5{
  padding-top: 0.875rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-\[22px\]{
  padding-top: 22px;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-justify{
  text-align: justify;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.font-mono{
  font-family: DM Mono, monospace;
}
.font-ui{
  font-family: var(--font-ui), sans-serif;
}
.text-\[0\.7em\]{
  font-size: 0.7em;
}
.text-\[10\.5px\]{
  font-size: 10.5px;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11\.5px\]{
  font-size: 11.5px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12\.5px\]{
  font-size: 12.5px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[16px\]{
  font-size: 16px;
}
.text-\[17px\]{
  font-size: 17px;
}
.text-\[19px\]{
  font-size: 19px;
}
.text-\[9\.5px\]{
  font-size: 9.5px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-\[calc\(var\(--ui-font-size\)-2px\)\]{
  font-size: calc(var(--ui-font-size) - 2px);
}
.text-\[calc\(var\(--ui-font-size\)-3px\)\]{
  font-size: calc(var(--ui-font-size) - 3px);
}
.text-\[length\:calc\(var\(--ui-font-size\)\)\]{
  font-size: calc(var(--ui-font-size));
}
.text-\[length\:calc\(var\(--ui-font-size\)\+0px\)\]{
  font-size: calc(var(--ui-font-size) + 0px);
}
.text-\[length\:calc\(var\(--ui-font-size\)\+1px\)\]{
  font-size: calc(var(--ui-font-size) + 1px);
}
.text-\[length\:calc\(var\(--ui-font-size\)\+3px\)\]{
  font-size: calc(var(--ui-font-size) + 3px);
}
.text-\[length\:calc\(var\(--ui-font-size\)-1\.5px\)\]{
  font-size: calc(var(--ui-font-size) - 1.5px);
}
.text-\[length\:calc\(var\(--ui-font-size\)-1px\)\]{
  font-size: calc(var(--ui-font-size) - 1px);
}
.text-\[length\:calc\(var\(--ui-font-size\)-2\.5px\)\]{
  font-size: calc(var(--ui-font-size) - 2.5px);
}
.text-\[length\:calc\(var\(--ui-font-size\)-2px\)\]{
  font-size: calc(var(--ui-font-size) - 2px);
}
.text-\[length\:calc\(var\(--ui-font-size\)-3px\)\]{
  font-size: calc(var(--ui-font-size) - 3px);
}
.text-\[length\:var\(--ui-font-size\)\]{
  font-size: var(--ui-font-size);
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.not-italic{
  font-style: normal;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.5\]{
  line-height: 1.5;
}
.leading-\[1\.6\]{
  line-height: 1.6;
}
.leading-\[18px\]{
  line-height: 18px;
}
.leading-none{
  line-height: 1;
}
.leading-normal{
  line-height: 1.5;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[-0\.005em\]{
  letter-spacing: -0.005em;
}
.tracking-\[-0\.01em\]{
  letter-spacing: -0.01em;
}
.tracking-\[-0\.02em\]{
  letter-spacing: -0.02em;
}
.tracking-\[-0\.5px\]{
  letter-spacing: -0.5px;
}
.tracking-\[\.08em\]{
  letter-spacing: .08em;
}
.tracking-\[\.12em\]{
  letter-spacing: .12em;
}
.tracking-\[\.14em\]{
  letter-spacing: .14em;
}
.tracking-\[\.1em\]{
  letter-spacing: .1em;
}
.tracking-\[0\.05em\]{
  letter-spacing: 0.05em;
}
.tracking-\[0\.06em\]{
  letter-spacing: 0.06em;
}
.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-\[0\.5px\]{
  letter-spacing: 0.5px;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[\#22c55e\]{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-\[\#d04545\]{
  --tw-text-opacity: 1;
  color: rgb(208 69 69 / var(--tw-text-opacity, 1));
}
.text-\[\#e05252\]{
  --tw-text-opacity: 1;
  color: rgb(224 82 82 / var(--tw-text-opacity, 1));
}
.text-\[\#e53935\]{
  --tw-text-opacity: 1;
  color: rgb(229 57 53 / var(--tw-text-opacity, 1));
}
.text-\[\#ef4444\]{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-\[\#f06a6a\]{
  --tw-text-opacity: 1;
  color: rgb(240 106 106 / var(--tw-text-opacity, 1));
}
.text-\[\#f0a840\]{
  --tw-text-opacity: 1;
  color: rgb(240 168 64 / var(--tw-text-opacity, 1));
}
.text-\[var\(--acc\)\]{
  color: var(--acc);
}
.text-\[var\(--danger\2c \#e53e3e\)\]{
  color: var(--danger,#e53e3e);
}
.text-\[var\(--green\)\]{
  color: var(--green);
}
.text-\[var\(--green\2c \#22a863\)\]{
  color: var(--green,#22a863);
}
.text-\[var\(--red\2c \#f06a6a\)\]{
  color: var(--red,#f06a6a);
}
.text-\[var\(--t1\)\]{
  color: var(--t1);
}
.text-\[var\(--t2\)\]{
  color: var(--t2);
}
.text-\[var\(--t3\)\]{
  color: var(--t3);
}
.text-acc{
  color: var(--acc);
}
.text-amber{
  color: var(--amber);
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-400\/80{
  color: rgb(96 165 250 / 0.8);
}
.text-emerald-600{
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-green{
  color: var(--green);
}
.text-inherit{
  color: inherit;
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-red{
  color: var(--red);
}
.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700{
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-sky-600{
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-t1{
  color: var(--t1);
}
.text-t2{
  color: var(--t2);
}
.text-t3{
  color: var(--t3);
}
.text-t4{
  color: var(--t4);
}
.text-transparent{
  color: transparent;
}
.text-violet-600{
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-zinc-500{
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.caret-acc{
  caret-color: var(--acc);
}
.accent-\[var\(--acc\)\]{
  accent-color: var(--acc);
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-85{
  opacity: 0.85;
}
.\!shadow-none{
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_24px_rgba\(0\2c 0\2c 0\2c \.12\)\]{
  --tw-shadow: 0 -8px 24px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 -8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_40px_rgba\(0\2c 0\2c 0\2c \.16\)\]{
  --tw-shadow: 0 12px 40px rgba(0,0,0,.16);
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_48px_rgba\(0\2c 0\2c 0\2c \.2\)\]{
  --tw-shadow: 0 16px 48px rgba(0,0,0,.2);
  --tw-shadow-colored: 0 16px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_var\(--brd2\)\]{
  --tw-shadow: 0 1px 0 var(--brd2);
  --tw-shadow-colored: 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_4px_rgba\(0\2c 0\2c 0\2c \.12\)\]{
  --tw-shadow: 0 1px 4px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_4px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{
  --tw-shadow: 0 1px 4px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_12px_rgba\(0\2c 0\2c 0\2c \.06\)\]{
  --tw-shadow: 0 2px 12px rgba(0,0,0,.06);
  --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_2px_12px_rgba\(0\2c 0\2c 0\2c \.12\)\]{
  --tw-shadow: 0 2px 12px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c \.1\)\]{
  --tw-shadow: 0 4px 12px rgba(0,0,0,.1);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_12px_rgba\(0\2c 0\2c 0\2c \.15\)\]{
  --tw-shadow: 0 4px 12px rgba(0,0,0,.15);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c \.12\)\]{
  --tw-shadow: 0 4px 16px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_20px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{
  --tw-shadow: 0 6px 20px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c \.14\)\]{
  --tw-shadow: 0 8px 24px rgba(0,0,0,.14);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_28px_rgba\(0\2c 0\2c 0\2c 0\.16\)\]{
  --tw-shadow: 0 8px 28px rgba(0,0,0,0.16);
  --tw-shadow-colored: 0 8px 28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c \.12\)\]{
  --tw-shadow: 0 8px 32px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c \.14\)\]{
  --tw-shadow: 0 8px 32px rgba(0,0,0,.14);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{
  --tw-shadow: 0 8px 32px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_var\(--acc\)\]{
  --tw-shadow: inset 0 0 0 1px var(--acc);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_var\(--accdim\)\]{
  --tw-shadow: inset 0 0 0 1px var(--accdim);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline{
  outline-style: solid;
}
.\!ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-acc{
  --tw-ring-color: var(--acc);
}
.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);
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.invert{
  --tw-invert: invert(100%);
  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);
}
.\!filter{
  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) !important;
}
.filter{
  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-sm{
  --tw-backdrop-blur: blur(4px);
  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{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background\2c color\]{
  transition-property: background,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c box-shadow\]{
  transition-property: background-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\2c transform\]{
  transition-property: background-color,color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\]{
  transition-property: background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background\]{
  transition-property: background;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\]{
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\]{
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c background\2c color\]{
  transition-property: opacity,background,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c background-color\2c color\]{
  transition-property: opacity,background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c background\]{
  transition-property: opacity,background;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\]{
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c opacity\]{
  transition-property: width,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\]{
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-\[120ms\]{
  transition-duration: 120ms;
}
.duration-\[140ms\]{
  transition-duration: 140ms;
}
.duration-\[220ms\]{
  transition-duration: 220ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\[appearance\:textfield\]{
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.\[image-rendering\:-webkit-optimize-contrast\]{
  image-rendering: -webkit-optimize-contrast;
}
.\[scrollbar-width\:none\]{
  scrollbar-width: none;
}
.\[text-align\:justify\]{
  text-align: justify;
}
/* ── Custom Tooltip (data-tip) ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 400; line-height: 1.3;
  background: var(--t1, #18181b); color: var(--bg, #fff);
  pointer-events: none; opacity: 0; transition: opacity .12s;
  z-index: 9999; margin-bottom: 4px;
}
[data-tip]:hover::after { opacity: 1; }
aside button[data-tip]::after { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 4px; }
/* ── Activity Bar ── */
.activity-bar {
  width: 36px; flex-shrink: 0; height: 100%;
  background: var(--panel); border-right: 1px solid var(--brd);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px;
}
.activity-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; border-radius: 0;
  color: var(--t3); cursor: pointer;
  transition: color .15s;
  border: none; background: transparent;
}
.activity-icon:hover { color: var(--t1); }
.activity-icon.active { color: var(--acc); }
.activity-icon.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--acc);
}
/* ── Calendar Panel ── */
.calendar-panel { padding: 8px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendar-nav { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; color: var(--t1); }
.calendar-nav:hover { background: var(--hov); }
.calendar-title { font-size: 12px; font-weight: 500; color: var(--t1); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 4px; }
.calendar-wd { font-size: 10px; color: var(--t3); padding: 2px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.calendar-cell { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0 auto; border: none; border-radius: 50%; background: transparent; font-size: 11px; cursor: pointer; color: var(--t1); }
.calendar-cell.empty { cursor: default; }
.calendar-cell:not(.empty):hover { background: var(--hov); }
.calendar-cell.today { background: var(--acc); color: white; font-weight: 600; }
.calendar-cell.today:hover { opacity: 0.9; }
.calendar-dot { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--acc); }
.calendar-cell.today .calendar-dot { background: white; }
/* ── Daily Digest ── */
.daily-digest { border-top: 1px solid var(--brd); }
.daily-digest-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; border: none; background: var(--surf); color: var(--t3); font-size: 12px; cursor: pointer; text-align: left; }
.daily-digest-toggle:hover { background: var(--hov); }
.daily-digest-icon { font-size: 10px; }
.daily-digest-body { padding: 12px; }
.daily-digest-empty { text-align: center; padding: 16px; }
.daily-digest-generate-btn { padding: 6px 16px; border: 1px solid var(--acc); border-radius: 6px; background: var(--acc); color: white; font-size: 12px; cursor: pointer; }
.daily-digest-generate-btn:hover { opacity: 0.9; }
.daily-digest-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--t3); }
.daily-digest-loading { text-align: center; padding: 16px; color: var(--t3); font-size: 12px; }
.daily-digest-content { font-size: 13px; }
.daily-digest-insert-btn { margin-top: 8px; padding: 4px 12px; border: 1px solid var(--brd); border-radius: 4px; background: transparent; color: var(--t3); font-size: 11px; cursor: pointer; }
.daily-digest-insert-btn:hover { background: var(--hov); }
/* ── Theme Tokens ── */
:root {
  --font-ui: 'Sora', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --ui-font-size: 14px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f2f8; --panel: #fff; --surf: #f8f9fd; --surf2: #eef0f8;
  --hov: #e8ecf8; --act: #dde3f5; --brd: #dde2f0; --brd2: #c8d0e8;
  --t1: #1a2040; --t2: #4a5580; --t3: #8892b0; --t4: #c0c8e0;
  --acc: #3a6ef0; --acc2: #6a3af0; --accdim: #dce8ff; --accglow: rgba(58,110,240,.08);
  --green: #22a863; --gdim: #dcf5e8; --amber: #d4820a; --red: #d94040;
  --cyan: #0a8ab8; --purple: #8040d0; --card: #fff; --inp: #f4f5f8;
  --ic-md: #2563eb; --ic-html: #e44d26; --ic-code: #555e6e; --ic-img: #16a34a;
  --ic-draw: #7c3aed; --ic-web: #0284c7; --ic-folder: #d97706; --ic-default: #8892a8;
  --ic-ts: #3178c6; --ic-js: #e8b800; --ic-js-fg: #1a1a1a; --ic-json: #a67c2e;
  --ic-css: #663399; --ic-yaml: #b45309; --ic-py: #3572a5; --ic-sql: #0d7d72;
  --ic-pdf: #d93030;
  /* CodeMirror token colors — light values match defaultHighlightStyle */
  --cm-meta: #404740; --cm-keyword: #708; --cm-atom: #219; --cm-number: #164;
  --cm-string: #a11; --cm-regexp: #e40; --cm-var-def: #00f; --cm-var-local: #30a;
  --cm-type: #085; --cm-class: #167; --cm-var-special: #256; --cm-prop: #00c;
  --cm-comment: #940; --cm-invalid: #f00;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d14; --panel: #0f1219; --surf: #13161f; --surf2: #181c28;
  --hov: #1b1f2e; --act: #1e2438; --brd: #1c2136; --brd2: #252d4a;
  --t1: #e2e8f8; --t2: #9aa5c0; --t3: #6b7a96; --t4: #3a4560;
  --acc: #5b8af5; --acc2: #7c5bf5; --accdim: #131d42; --accglow: rgba(91,138,245,.1);
  --green: #3dd68c; --gdim: #0b2418; --amber: #f5a623; --red: #f06a6a;
  --cyan: #5dd8f5; --purple: #b87cf5; --card: #111420; --inp: #0f1219;
  --ic-md: #60a5fa; --ic-html: #f97316; --ic-code: #8899aa; --ic-img: #4ade80;
  --ic-draw: #a78bfa; --ic-web: #38bdf8; --ic-folder: #fbbf24; --ic-default: #64748b;
  --ic-ts: #60a5fa; --ic-js: #facc15; --ic-js-fg: #1a1a1a; --ic-json: #fbbf24;
  --ic-css: #a78bfa; --ic-yaml: #f59e0b; --ic-py: #60a5fa; --ic-sql: #2dd4bf;
  --ic-pdf: #f87171;
  /* CodeMirror token colors — dark values matched to .hljs dark palette */
  --cm-meta: #bbb529; --cm-keyword: #cc7832; --cm-atom: #6897bb; --cm-number: #6897bb;
  --cm-string: #6a8759; --cm-regexp: #e40; --cm-var-def: #ffc66d; --cm-var-local: #9876aa;
  --cm-type: #ffc66d; --cm-class: #e8bf6a; --cm-var-special: #9876aa; --cm-prop: #9876aa;
  --cm-comment: #a9b7c6; --cm-invalid: #f06a6a;
}
/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--t1);
  font-family: var(--font-ui); font-size: var(--ui-font-size); -webkit-font-smoothing: antialiased; }
button { font-family: var(--font-ui); cursor: pointer; border: none; background: none; color: inherit; }
/* ── Sidebar resize utility ── */
html.is-resizing, html.is-resizing * { -moz-user-select: none !important; user-select: none !important; -webkit-user-select: none !important; }
html.is-resizing::after { content: ''; position: fixed; inset: 0; z-index: 99999; }
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brd2); border-radius: 2px; }
/* Same stable-gutter fix as .cm-wrapper: constant scrollbar width (never a
   0↔6 toggle on hover) + scrollbar-gutter: stable keeps the preview content
   width constant when the scrollbar appears/disappears — fixes the hover
   flicker. The thumb is transparent until hover to keep the preview clean. */
.prev-body { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.prev-body:hover { scrollbar-color: var(--t4) transparent; }
.prev-body::-webkit-scrollbar { width: 6px; height: 6px; }
.prev-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.prev-body:hover::-webkit-scrollbar-thumb { background: var(--t4); }
.prev-body::-webkit-scrollbar-track { background: transparent; }
.chat-msg-scroll {
  /* Always reserve a thin 4px gutter so the message text width stays
   * constant. The old `width: 0` → `6px` hover toggle made the content
   * reflow 6px every time the mouse entered/left the scroll area, which
   * flickered (闪动) once the chat overflowed and needed to scroll. The
   * thumb is transparent when idle (looks hidden) and colors on hover.
   * 4px matches the app-wide thin scrollbar; no `scrollbar-width` /
   * `scrollbar-color` here — those standard props override the webkit
   * pseudo-element width in Chromium and render a thicker bar. */
}
.chat-msg-scroll::-webkit-scrollbar { width: 4px; }
.chat-msg-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.chat-msg-scroll:hover::-webkit-scrollbar-thumb { background: var(--t4); }
.chat-msg-scroll::-webkit-scrollbar-track { background: transparent; }
/* ── Keyframes (consolidated) ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes streaming-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ai-dot-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } }
/* ── Voice recording ring + glow (port of openless olchat-ring[recording]) ──
 * A spinning red conic-gradient comet tail masks into a 2px ring around the
 * mic button, plus a soft pulsing red halo behind it. The full Capsule/SiriGL
 * WebGL waveform is overkill for a 28px button — this is the panel-context
 * variant from openless (chat.css `.olchat-ring[data-ring='recording']`). */
@property --voice-ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.voice-ring {
  position: absolute;
  inset: -3px;
  border-radius: 9px;
  padding: 2px;
  background: conic-gradient(from var(--voice-ring-angle), transparent 0deg 250deg, #ef4444 320deg 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: voice-ring-spin 1.1s linear infinite;
  pointer-events: none;
}
@keyframes voice-ring-spin { to { --voice-ring-angle: 360deg; } }
.voice-glow {
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(239,68,68,0.45), transparent 70%);
  animation: voice-glow-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
  /* ponytail: no z-index — DOM order paints glow first, button on top, ring
   * last. The wrapper `<span relative inline-flex>` is NOT a stacking context
   * (no z-index), so z-index: -1 would leak behind the AI panel's bg. */
}
@keyframes voice-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-ring { animation: none; background: conic-gradient(#ef4444 0 100%); opacity: 0.55; }
  .voice-glow { animation: none; opacity: 0.3; }
}
/* ── Loading spinner & overlay ── */
.ft-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--brd); border-top-color: var(--acc);
  border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0;
}
.ed-loading-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surf); color: var(--t3); font-size: 13px;
}
/* ── CodeMirror ── */
.cm-wrapper { flex: 1; overflow: hidden; position: relative; }
.cm-wrapper .cm-editor { height: 100%; }
/* Keep the scrollbar width constant (never 0↔6 toggle) and reserve its gutter
   with scrollbar-gutter: stable so the content width never changes when the
   scrollbar appears/disappears — fixes the hover flicker. Only the thumb
   colour toggles (transparent until hover), preserving the clean look. */
.cm-wrapper .cm-scroller { overflow: auto; line-height: 1.7; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.cm-wrapper:hover .cm-scroller { scrollbar-color: var(--t4) transparent; }
.cm-wrapper .cm-scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.cm-wrapper .cm-scroller::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.cm-wrapper:hover .cm-scroller::-webkit-scrollbar-thumb { background: var(--t4); }
.cm-wrapper .cm-scroller::-webkit-scrollbar-track { background: transparent; }
.cm-wrapper .cm-content { padding: 16px 16px 80vh 6px; }
.cm-wrapper .cm-gutters { background: var(--surf); border-right: none !important; color: var(--t3); }
.cm-wrapper .cm-lineNumbers .cm-gutterElement { padding: 0 2px 0 8px !important; }
.cm-wrapper .cm-activeLineGutter { background: var(--surf2) !important; }
.cm-wrapper .cm-activeLine { background: transparent !important; }
.cm-wrapper .cm-selectionBackground { background: #b3d4fc !important; }
[data-theme="dark"] .cm-wrapper .cm-selectionBackground { background: #3a5da8 !important; }
[data-theme="dark"] .cm-indent-markers { --indent-marker-bg-color: #1c2136; --indent-marker-active-bg-color: #252d4a; }
.cm-wrapper .cm-cursor { border-left-color: var(--acc); }
.cm-wrapper .cm-foldGutter { width: 12px; }
.cm-wrapper .cm-foldGutter .cm-gutterElement { padding: 0 !important; }
/* ── CodeMirror autocomplete tooltip (file-preview src picker etc.) ── */
.cm-tooltip.cm-tooltip-autocomplete {
  background: var(--panel);
  border: 1px solid var(--brd);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  max-width: 460px;
}
.cm-tooltip.cm-tooltip-autocomplete > ul {
  font-family: var(--font-ui);
  max-height: 320px;
  min-width: 240px;
}
.cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding: 9px 12px;
  margin: 3px 0;
  border-radius: 7px;
  line-height: 1.6;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--act);
  color: var(--t1);
}
.cm-tooltip-autocomplete .cm-completionDetail {
  color: var(--t3);
  font-style: normal;
  font-size: 12px;
  margin-left: 1em;
}
.cm-tooltip-autocomplete .cm-completionMatchedText {
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
}
.cm-tooltip-autocomplete .cm-completionIcon {
  width: 1.1em;
  opacity: .8;
}
/* Search box pinned to the top of the file-preview src dropdown */
.cm-src-search-box { padding: 0 0 8px; }
.cm-src-search-box input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--brd);
  border-radius: 7px;
  background: var(--inp);
  color: var(--t1);
  font-family: var(--font-ui);
  font-size: 13px;
  outline: none;
}
.cm-src-search-box input:focus { border-color: var(--acc); }
.cm-src-search-box input::-moz-placeholder { color: var(--t3); }
.cm-src-search-box input::placeholder { color: var(--t3); }
/* ── AI Panel (animations, scrollbar, pseudo-selectors) ── */
.ai-session-streaming {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  animation: streaming-pulse 1.2s ease-in-out infinite; flex-shrink: 0;
}
.msg-thinking { margin-bottom: 6px; padding: 6px 8px; background: rgba(128,64,208,.06); border-left: 2px solid var(--purple, #8040d0); border-radius: 4px; }
.msg-thinking-label { font-size: 10px; font-weight: 600; color: var(--purple, #8040d0); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 4px; }
.msg-thinking-label::before { content: '▶'; font-size: 8px; transition: transform .15s; }
.msg-thinking[open] .msg-thinking-label::before { transform: rotate(90deg); }
.msg-thinking-label::-webkit-details-marker { display: none; }
.msg-thinking-body { font-size: 11px; line-height: 1.5; color: var(--t3); white-space: pre-wrap; max-height: 200px; overflow-y: auto; margin-top: 4px; }
.tc-spinner {
  width: 10px; height: 10px; border: 1.5px solid var(--brd2); border-top-color: var(--amber, #d4820a);
  border-radius: 50%; animation: spin .6s linear infinite;
}
.cursor-blink { animation: blink 1s step-end infinite; color: var(--acc); }
.ai-streaming-indicator {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  align-self: flex-start;
}
.ai-streaming-dots { display: flex; gap: 4px; }
.ai-streaming-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  animation: ai-dot-bounce .6s ease-in-out infinite;
}
.ai-streaming-dots span:nth-child(2) { animation-delay: .15s; }
.ai-streaming-dots span:nth-child(3) { animation-delay: .3s; }
/* ── Chat message bubbles (shared by AiPanel + pet chat) ──
 * Quiet, flat design: solid colors, no gradients / shadows / avatars.
 * The accent bubble on the right is enough to tell user from AI. */
.chat-msg-row { display: flex; }
.chat-msg-bubble { min-width: 0; border-radius: 12px; padding: 8px 12px; }
.chat-msg-bubble-ai { flex: 1; background: var(--surf); border: 1px solid var(--brd); }
.chat-msg-bubble-user { max-width: 88%; background: var(--acc); color: #fff; }
.chat-msg-user-text { font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: #fff; }
.chat-msg-user-meta { display: flex; justify-content: flex-end; margin-top: 3px; font-size: 9px; line-height: 1; color: rgba(255,255,255,.65); }
[data-theme="dark"] .chat-msg-bubble-user { background: color-mix(in srgb, var(--acc) 55%, var(--surf)); }
.chat-pair-tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: 11px; line-height: 1.5; color: var(--t3);
}
/* Bubble actions (copy / save-to-wiki) — revealed on row hover, always
 * visible on touch (no hover) and while focus is inside the actions. */
.chat-msg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity .15s ease; }
.chat-msg-row:hover .chat-msg-actions, .chat-msg-actions:focus-within { opacity: 1; }
@media (hover: none) { .chat-msg-actions { opacity: 1; } }
/* Chat empty state */
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.chat-empty-badge {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--acc); margin-bottom: 2px;
  background: var(--accdim);
}
/* Chat input send / stop buttons */
.chat-send-btn, .chat-stop-btn {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: opacity .12s ease;
}
.chat-send-btn { background: var(--acc); }
.chat-send-btn:hover:not(:disabled) { opacity: .85; }
.chat-send-btn:disabled { opacity: .35; cursor: not-allowed; }
.chat-stop-btn { background: var(--red); }
.chat-stop-btn:hover { opacity: .85; }
/* Inline chat error bar (attachment rejection / save failure) */
.chat-inline-error {
  display: flex; align-items: center; gap: 6px;
  margin: 0 12px 8px; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; line-height: 1.4; color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 24%, transparent);
}
/* Floating chat toast (transient success/info, e.g. "context cleared") */
.chat-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  font-size: 12px; line-height: 1.4; color: var(--t1);
  background: var(--panel); border: 1px solid var(--brd);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: chat-toast-in 160ms ease-out;
  pointer-events: none;
}
.chat-toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
@keyframes chat-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Markdown in messages ── */
.msg-md { font-size: 12px; line-height: 1.7; color: var(--t1); }
.msg-md p { margin: 0 0 8px; }
.msg-md p:last-child { margin-bottom: 0; }
.msg-md ul, .msg-md ol { margin: 4px 0 8px 16px; padding: 0; }
.msg-md li { margin-bottom: 2px; }
.msg-md code { font-family: var(--font-mono); font-size: 11px; background: var(--surf2); border: 1px solid var(--brd); border-radius: 3px; padding: 1px 4px; }
.msg-md pre { margin: 8px 0; border-radius: 6px; overflow: hidden; }
.msg-md pre code { display: block; padding: 10px 12px; font-size: 11px; line-height: 1.5; background: var(--surf2); border: 1px solid var(--brd); border-radius: 6px; overflow-x: auto; white-space: pre; }
.msg-md h1, .msg-md h2, .msg-md h3, .msg-md h4 { margin: 10px 0 4px; font-weight: 600; color: var(--t1); }
.msg-md h1 { font-size: 16px; }
.msg-md h2 { font-size: 14px; }
.msg-md h3 { font-size: 13px; }
.msg-md blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--brd2); color: var(--t2); font-style: italic; }
.msg-md a { color: var(--acc); text-decoration: none; }
.msg-md a:hover { text-decoration: underline; }
.msg-md table { display: block; width: -moz-max-content; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0; font-size: 11px; }
.msg-md th, .msg-md td { border: 1px solid var(--brd); padding: 4px 8px; }
.msg-md th { background: var(--surf2); font-weight: 600; }
/* ── Diff View (color-mix) ── */
.diff-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .12s; }
.diff-btn-accept, .diff-btn-accept-all { background: color-mix(in srgb, var(--green, #22a863) 12%, transparent); color: var(--green, #22a863); border: 1px solid color-mix(in srgb, var(--green, #22a863) 30%, transparent); }
.diff-btn-accept:hover, .diff-btn-accept-all:hover { background: color-mix(in srgb, var(--green, #22a863) 20%, transparent); }
.diff-btn-reject, .diff-btn-reject-all { background: color-mix(in srgb, var(--red, #f06a6a) 12%, transparent); color: var(--red, #f06a6a); border: 1px solid color-mix(in srgb, var(--red, #f06a6a) 30%, transparent); }
.diff-btn-reject:hover, .diff-btn-reject-all:hover { background: color-mix(in srgb, var(--red, #f06a6a) 20%, transparent); }
.diff-status-badge { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 3px; }
.diff-status-badge.accepted { background: color-mix(in srgb, var(--green, #22a863) 15%, transparent); color: var(--green, #22a863); }
.diff-status-badge.rejected { background: color-mix(in srgb, var(--red, #f06a6a) 15%, transparent); color: var(--red, #f06a6a); }
.diff-line { display: flex; padding: 0 8px; min-height: 18px; }
.diff-line.diff-add { background: color-mix(in srgb, var(--green, #22a863) 10%, transparent); }
.diff-line.diff-remove { background: color-mix(in srgb, var(--red, #f06a6a) 10%, transparent); }
.diff-line.diff-separator { justify-content: center; color: var(--t3); font-size: 10px; padding: 2px 0; background: var(--surf); }
/* ── prev-body :has() rules ── */
/* ponytail: direct-child `> ` — these full-bleed rules are meant for standalone
   .png/.svg/.html/.pdf files where the viewer is the direct child of .prev-body.
   Without `>`, a :::file-preview embedding an image/html/pdf inside markdown
   matches :has() too, locking the whole preview page's scroll. */
.prev-body:has(> .image-viewer) { padding: 0; overflow: hidden; }
.prev-body:has(> .html-preview-frame) { padding: 0; overflow: hidden; }
.html-preview-frame { width: 100%; height: 100%; border: none; background: #fff; }
.prev-body:has(> .pdf-viewer) { padding: 0; overflow: hidden; }
.pdf-page-wrap { contain: layout style; }
/* ── SKILL Meta Card (color-mix / linear-gradient) ── */
.skill-meta-card { background: linear-gradient(135deg, var(--surf) 0%, color-mix(in srgb, var(--acc) 6%, var(--surf)) 100%); border: 1px solid color-mix(in srgb, var(--acc) 20%, var(--brd)); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.skill-meta-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.skill-meta-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--acc); color: #fff; line-height: 1.6; }
.skill-meta-name { font-size: 16px; font-weight: 700; color: var(--t1); }
.skill-meta-description { font-size: 13px; line-height: 1.65; color: var(--t2); margin: 4px 0 0; }
.skill-meta-field { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 12px; }
.skill-meta-key { flex-shrink: 0; color: var(--t3); font-weight: 600; font-family: var(--font-mono); padding: 1px 5px; background: var(--surf2); border-radius: 3px; }
.skill-meta-value { color: var(--t2); word-break: break-word; }
/* MathJax inline math must stay inline. Tailwind's preflight forces
   `svg { display: block }` on every SVG, which turns the MathJax <svg> inside
   the inline mjx-container into a block box and shoves each inline formula
   ($..$) onto its own line. Restore MathJax's intended inline SVG. */
mjx-container svg {
  display: inline;
}
/* ── Markdown Preview (targets rendered HTML) ── */
.md-preview { font-family: var(--font-ui); font-size: 14px; line-height: 1.8; color: var(--t1); word-break: break-word; text-align: left; }
.translation-result .md-preview { font-size: var(--ui-font-size); line-height: 1.6; text-align: justify; }
.translation-result .md-preview > :first-child { margin-top: 0; }
.translation-result .md-preview > :last-child { margin-bottom: 0; }
.md-preview h1 { font-size: 28px; font-weight: 700; margin: 8px 0 12px; border-bottom: 1px solid var(--brd); padding-bottom: 8px; }
.md-preview h2 { font-size: 22px; font-weight: 700; margin: 20px 0 10px; }
.md-preview h3 { font-size: 18px; font-weight: 600; margin: 16px 0 8px; }
.md-preview h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; }
.md-preview h5, .md-preview h6 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.md-preview p { margin: 8px 0; }
.md-preview a { color: var(--acc); text-decoration: none; }
.md-preview a:hover { text-decoration: underline; }
.md-preview strong { font-weight: 700; }
.md-preview em { font-style: italic; }
.md-preview del { text-decoration: line-through; color: var(--t3); }
.md-preview code { font-family: var(--font-mono); font-size: 12px; background: var(--surf); padding: 2px 5px; border-radius: 3px; border: 1px solid var(--brd); }
.md-preview pre code, .code-block-wrapper pre code { background: none; border: none; padding: 12px 16px; border-radius: 0; }
.code-block-wrapper { border: 1px solid var(--brd); border-radius: 6px; margin: 12px 0; position: relative; max-height: 420px; overflow: hidden; }
.code-block-wrapper--no-height-cap { max-height: none; overflow: visible; padding: 8px; box-sizing: border-box; }
.code-block-wrapper--empty-html { min-height: 60px; }
.code-block-empty-html { flex: 1; }
.code-block-inner { display: grid; grid-template-columns: auto 1fr; max-height: 420px; overflow: auto; }
.code-block-inner .code-line-numbers { position: sticky; left: 0; z-index: 1; padding: 12px 0; border-right: 1px solid var(--brd); background: var(--surf2); -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; }
.code-block-inner .code-ln { display: block; padding: 0 10px; text-align: right; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--t3); min-width: 32px; }
.code-block-inner pre { margin: 0; border: none; border-radius: 0; background: var(--surf); padding: 0; overflow: visible; }
.code-block-inner pre code { display: block; padding: 12px 16px; font-size: 12px; line-height: 1.6; color: var(--t1); background: none; border: none; white-space: pre; }
.code-block-inner pre code br { display: none; }
.md-preview > pre { background: var(--surf); border: 1px solid var(--brd); border-radius: 6px; padding: 12px 16px; margin: 12px 0; max-height: 420px; overflow: auto; }
.code-copy-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; line-height: 1; color: var(--t3); background: none; border: none; cursor: pointer; opacity: 0; transition: opacity .15s, color .12s, background .12s; z-index: 3; }
.code-block-wrapper:hover .code-copy-btn { opacity: .7; }
.code-copy-btn:hover { opacity: 1 !important; color: var(--t1); background: var(--hov); }
.code-copy-btn.copied { opacity: 1 !important; color: var(--green); }
.code-run-btn { position: absolute; top: 4px; right: 32px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 3px; line-height: 1; background: none; border: none; cursor: pointer; opacity: 0; transition: opacity .15s, background .12s; z-index: 3; }
.code-block-wrapper:hover .code-run-btn { opacity: .9; }
.code-run-btn:hover { opacity: 1 !important; background: var(--hov); }
/* ponytail: the output panel itself no longer scrolls — only .code-run-output-
   body does — so the absolutely-positioned sync icon (.code-sync-btn, top-right)
   and the status row stay pinned while long output (e.g. dir listing) scrolls
   under them. max-height caps the panel; flex column lets the body flex/shrink. */
.code-run-output { position: relative; border-top: 1px solid var(--brd); background: var(--surf2, var(--surf)); padding: 8px 12px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--t2); max-height: 240px; display: flex; flex-direction: column; }
.code-run-output-body { overflow: auto; min-height: 0; }
.code-run-output pre { margin: 0; white-space: pre-wrap; word-break: break-word; background: none; border: none; padding: 0; }
.code-run-stderr { color: var(--red, #f06a6a); }
.code-run-status { display: flex; align-items: center; gap: 6px; color: var(--t3); font-size: 11px; margin-top: 4px; }
/* ponytail: matching background + radius so the pinned sync chip stays a
   clean opaque square while output scrolls under it (transparent bg would let
   text bleed through the icon). Opacity still drives the dim→bright hover. */
.code-sync-btn { position: absolute; top: 6px; right: 6px; padding: 2px; line-height: 1; background: var(--surf2, var(--surf)); border: none; border-radius: 3px; cursor: pointer; color: var(--t3); opacity: .7; transition: opacity .12s, color .12s; z-index: 2; }
.code-sync-btn:hover { opacity: 1; color: var(--t1); }
.md-preview blockquote { border-left: 3px solid var(--acc); padding: 4px 16px; margin: 12px 0; color: var(--t2); background: var(--surf); border-radius: 0 6px 6px 0; }
/* ponytail: run output synced to the editor lands as a `> ` blockquote, but
   blockquotes default to the proportional body font + collapsed spaces — so
   dir's column alignment (and any monospace table) scrambles. rehypeMarkResult
   Block tags the blockquote right after a `<!-- Result -->` comment with
   .run-result; restore monospace + pre-wrap so spaces/columns survive. */
.md-preview blockquote.run-result { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; white-space: pre-wrap; color: var(--t2); font-style: normal; }
.md-preview ul { padding-left: 24px; margin: 8px 0; list-style-type: disc; }
.md-preview ol { padding-left: 24px; margin: 8px 0; list-style-type: decimal; }
.md-preview li { margin: 4px 0; }
.md-preview li::marker { color: var(--t1); }
.md-preview ul.contains-task-list { list-style-type: none; padding-left: 4px; }
.md-preview hr { border: none; border-top: 1px solid var(--brd); margin: 20px 0; }
.md-preview table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.md-preview th, .md-preview td { border: 1px solid var(--brd); padding: 6px 12px; font-size: 12px; text-align: left; }
.md-preview th { background: var(--surf); font-weight: 600; }
.md-preview img { max-width: 100%; border-radius: 6px; margin: 8px auto; display: block; }
/* ponytail: inline-block shrink-to-fit + max-width:100% on inner media → wrapper
   tracks the rendered media size when state is null. On drag, inline width
   overrides shrink-to-fit. > :not(.resize-handle) neutralizes mermaid's flex
   justify-center (flex children shrink-to-fit and ignore parent width). */
.md-preview .resizable-media { position: relative; display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 8px auto; line-height: 0; }
.md-preview .resizable-media > *:not(.resize-handle) { display: block; width: 100%; }
/* ponytail: !important beats plantuml.com's inline svg style="width:…;height:…"
   — without it the SVG renders at intrinsic px size and the resize handle has
   no visible effect. Mermaid/graphviz don't ship inline styles, so this is a
   no-op for them. */
.md-preview .resizable-media img,
.md-preview .resizable-media svg { width: 100% !important; height: auto !important; display: block; margin: 0; max-width: none !important; }
.md-preview .resize-handle {
  position: absolute; right: 0; bottom: 0;
  width: 14px; height: 14px; cursor: nwse-resize;
  background: transparent; border-right: 2px solid var(--t3, #888);
  border-bottom: 2px solid var(--t3, #888);
  border-bottom-right-radius: 6px; opacity: 0;
  transition: opacity 0.12s ease;
}
.md-preview .resizable-media:hover .resize-handle { opacity: 0.6; }
.md-preview .resize-handle:hover { opacity: 1; color: var(--acc, #597EF7); border-color: var(--acc, #597EF7); }
.md-preview input[type="checkbox"] { margin-right: 6px; }
/* ── Syntax Highlighting ── */
.md-preview .hljs-comment, .md-preview .hljs-quote { color: #940; }
.md-preview .hljs-keyword, .md-preview .hljs-selector-tag { color: #708; }
.md-preview .hljs-number, .md-preview .hljs-literal { color: #164; }
.md-preview .hljs-string, .md-preview .hljs-addition { color: #a11; }
.md-preview .hljs-regexp { color: #e40; }
.md-preview .hljs-tag, .md-preview .hljs-name { color: #170; }
.md-preview .hljs-attr, .md-preview .hljs-variable, .md-preview .hljs-template-variable { color: #00c; }
.md-preview .hljs-attribute { color: #00c; }
.md-preview .hljs-type, .md-preview .hljs-built_in, .md-preview .hljs-builtin-name, .md-preview .hljs-class .hljs-title { color: #085; }
.md-preview .hljs-meta { color: #555; }
.md-preview .hljs-title, .md-preview .hljs-function .hljs-title { color: #00f; }
.md-preview .hljs-section { color: #00f; }
.md-preview .hljs-deletion { color: #a11; }
.md-preview .hljs-symbol, .md-preview .hljs-bullet { color: #708; }
.md-preview .hljs-link { color: #219; }
.md-preview .hljs-emphasis { font-style: italic; }
.md-preview .hljs-strong { font-weight: bold; }
[data-theme="dark"] .md-preview .hljs-comment, [data-theme="dark"] .md-preview .hljs-quote { color: #a9b7c6; }
[data-theme="dark"] .md-preview .hljs-keyword, [data-theme="dark"] .md-preview .hljs-selector-tag { color: #cc7832; }
[data-theme="dark"] .md-preview .hljs-number, [data-theme="dark"] .md-preview .hljs-literal { color: #6897bb; }
[data-theme="dark"] .md-preview .hljs-string, [data-theme="dark"] .md-preview .hljs-addition { color: #6a8759; }
[data-theme="dark"] .md-preview .hljs-regexp { color: #e40; }
[data-theme="dark"] .md-preview .hljs-tag, [data-theme="dark"] .md-preview .hljs-name { color: #e8bf6a; }
[data-theme="dark"] .md-preview .hljs-attr, [data-theme="dark"] .md-preview .hljs-variable, [data-theme="dark"] .md-preview .hljs-template-variable { color: #9876aa; }
[data-theme="dark"] .md-preview .hljs-attribute { color: #9876aa; }
[data-theme="dark"] .md-preview .hljs-type, [data-theme="dark"] .md-preview .hljs-built_in, [data-theme="dark"] .md-preview .hljs-builtin-name, [data-theme="dark"] .md-preview .hljs-class .hljs-title { color: #ffc66d; }
[data-theme="dark"] .md-preview .hljs-meta { color: #bbb529; }
[data-theme="dark"] .md-preview .hljs-title, [data-theme="dark"] .md-preview .hljs-function .hljs-title { color: #ffc66d; }
[data-theme="dark"] .md-preview .hljs-section { color: #ffc66d; }
[data-theme="dark"] .md-preview .hljs-deletion { color: #cc7832; }
[data-theme="dark"] .md-preview .hljs-symbol, [data-theme="dark"] .md-preview .hljs-bullet { color: #cc7832; }
[data-theme="dark"] .md-preview .hljs-link { color: #6897bb; }
/* ── Rich-text editor code block highlighting (lowlight via tiptap) ──
   Mirrors the .md-preview rules above so a code block in RichTextEditor
   colors tokens the same as in markdown preview. Scoped to .ProseMirror
   pre code so it never collides with other <pre>/<code> on the page. */
.ProseMirror pre code .hljs-comment, .ProseMirror pre code .hljs-quote { color: #940; }
.ProseMirror pre code .hljs-keyword, .ProseMirror pre code .hljs-selector-tag { color: #708; }
.ProseMirror pre code .hljs-number, .ProseMirror pre code .hljs-literal { color: #164; }
.ProseMirror pre code .hljs-string, .ProseMirror pre code .hljs-addition { color: #a11; }
.ProseMirror pre code .hljs-regexp { color: #e40; }
.ProseMirror pre code .hljs-tag, .ProseMirror pre code .hljs-name { color: #170; }
.ProseMirror pre code .hljs-attr, .ProseMirror pre code .hljs-variable, .ProseMirror pre code .hljs-template-variable { color: #00c; }
.ProseMirror pre code .hljs-attribute { color: #00c; }
.ProseMirror pre code .hljs-type, .ProseMirror pre code .hljs-built_in, .ProseMirror pre code .hljs-builtin-name, .ProseMirror pre code .hljs-class .hljs-title { color: #085; }
.ProseMirror pre code .hljs-meta { color: #555; }
.ProseMirror pre code .hljs-title, .ProseMirror pre code .hljs-function .hljs-title { color: #00f; }
.ProseMirror pre code .hljs-section { color: #00f; }
.ProseMirror pre code .hljs-deletion { color: #a11; }
.ProseMirror pre code .hljs-symbol, .ProseMirror pre code .hljs-bullet { color: #708; }
.ProseMirror pre code .hljs-link { color: #219; }
.ProseMirror pre code .hljs-emphasis { font-style: italic; }
.ProseMirror pre code .hljs-strong { font-weight: bold; }
[data-theme="dark"] .ProseMirror pre code .hljs-comment, [data-theme="dark"] .ProseMirror pre code .hljs-quote { color: #a9b7c6; }
[data-theme="dark"] .ProseMirror pre code .hljs-keyword, [data-theme="dark"] .ProseMirror pre code .hljs-selector-tag { color: #cc7832; }
[data-theme="dark"] .ProseMirror pre code .hljs-number, [data-theme="dark"] .ProseMirror pre code .hljs-literal { color: #6897bb; }
[data-theme="dark"] .ProseMirror pre code .hljs-string, [data-theme="dark"] .ProseMirror pre code .hljs-addition { color: #6a8759; }
[data-theme="dark"] .ProseMirror pre code .hljs-regexp { color: #e40; }
[data-theme="dark"] .ProseMirror pre code .hljs-tag, [data-theme="dark"] .ProseMirror pre code .hljs-name { color: #e8bf6a; }
[data-theme="dark"] .ProseMirror pre code .hljs-attr, [data-theme="dark"] .ProseMirror pre code .hljs-variable, [data-theme="dark"] .ProseMirror pre code .hljs-template-variable { color: #9876aa; }
[data-theme="dark"] .ProseMirror pre code .hljs-attribute { color: #9876aa; }
[data-theme="dark"] .ProseMirror pre code .hljs-type, [data-theme="dark"] .ProseMirror pre code .hljs-built_in, [data-theme="dark"] .ProseMirror pre code .hljs-builtin-name, [data-theme="dark"] .ProseMirror pre code .hljs-class .hljs-title { color: #ffc66d; }
[data-theme="dark"] .ProseMirror pre code .hljs-meta { color: #bbb529; }
[data-theme="dark"] .ProseMirror pre code .hljs-title, [data-theme="dark"] .ProseMirror pre code .hljs-function .hljs-title { color: #ffc66d; }
[data-theme="dark"] .ProseMirror pre code .hljs-section { color: #ffc66d; }
[data-theme="dark"] .ProseMirror pre code .hljs-deletion { color: #cc7832; }
[data-theme="dark"] .ProseMirror pre code .hljs-symbol, [data-theme="dark"] .ProseMirror pre code .hljs-bullet { color: #cc7832; }
[data-theme="dark"] .ProseMirror pre code .hljs-link { color: #6897bb; }
/* ── Steps container (CSS counter) ── */
.docmd-steps { position: relative; padding-left: 3rem; margin: 1.5rem 0; counter-reset: docmd-step; }
.docmd-steps-line { position: absolute; left: 1.15rem; top: 1rem; bottom: 1rem; width: 2px; background-color: var(--brd, #e4e4e7); }
.docmd-step { position: relative; margin-bottom: 2.5rem; counter-increment: docmd-step; }
.docmd-step-number { position: absolute; left: -2.75rem; top: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; line-height: 1; color: var(--t2, #3f3f46); z-index: 1; background-color: var(--surf, #f4f4f5); border: 1px solid var(--brd, #e4e4e7); border-radius: 50%; }
.docmd-step-number::before { content: counter(docmd-step); }
/* ── Button system ── */
.btn { padding: 6px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); }
.btn-p { background: var(--acc); color: white; border: none; }
.btn-p:hover { filter: brightness(1.1); }
.btn-g { background: var(--surf2); border: 1px solid var(--brd2); color: var(--t2); }
.btn-g:hover { background: var(--hov); color: var(--t1); }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-d { background: rgba(240,106,106,.1); border: 1px solid rgba(240,106,106,.25); color: var(--red, #f06a6a); }
.btn-d:hover { background: rgba(240,106,106,.18); }
/* ── Dialog / Modal ── */
.dlg-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn .15s ease; }
.dlg { background: var(--panel); border: 1px solid var(--brd); border-radius: 14px; width: 420px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: slideUp .2s ease; }
.dlg-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; font-size: 15px; font-weight: 600; color: var(--t1); }
.dlg-hd h3 { margin: 0; }
.dlg-close { background: none; border: none; color: var(--t3); font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.dlg-close:hover { background: var(--hov); color: var(--t1); }
.dlg-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.dlg-label { font-size: 11px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }
.dlg-input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--brd); background: var(--inp); color: var(--t1); font-size: 13px; font-family: var(--font-ui); outline: none; transition: border-color .15s; height: 36px; }
.dlg-input:focus { border-color: var(--acc); }
.dlg-input-group { display: flex; width: 100%; align-items: stretch; }
.dlg-input-group .dlg-input-flex { flex: 1; min-width: 0; border-radius: 8px 0 0 8px; }
.dlg-input-group .dlg-input-flex:focus { border-color: var(--acc); position: relative; z-index: 1; }
.dlg-input-btn { flex: 0 0 auto; padding: 0 14px; border-radius: 0 8px 8px 0; border: 1px solid var(--brd); border-left: none; background: var(--surf); color: var(--t2); font-size: 13px; font-family: var(--font-ui); cursor: pointer; height: 36px; transition: background .15s, color .15s; }
.dlg-input-btn:hover:not(:disabled) { background: var(--hov); color: var(--t1); }
.dlg-input-btn:disabled { opacity: .4; cursor: not-allowed; }
.dlg-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlg-provider-card { padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1.5px solid var(--brd); background: var(--surf); transition: border-color .15s, background .15s; }
.dlg-provider-card:hover { border-color: var(--brd2); background: var(--hov); }
.dlg-provider-card.active { border-color: var(--acc); background: var(--accdim); }
.dlg-provider-label { font-size: 13px; font-weight: 500; color: var(--t1); display: flex; align-items: center; gap: 6px; }
.dlg-provider-icon { width: 16px; height: 16px; display: inline-block; }
.dlg-provider-desc { font-size: 10px; color: var(--t3); margin-top: 3px; line-height: 1.4; }
.dlg-error { font-size: 12px; color: var(--red); margin-top: 4px; }
.dlg-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--brd); }
.dlg-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--brd); }
.dlg-btn { padding: 6px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 1px solid var(--brd); background: var(--surf); color: var(--t2); font-family: var(--font-ui); transition: all .15s; }
.dlg-btn:hover { background: var(--hov); color: var(--t1); }
.dlg-btn.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.dlg-btn.primary:hover { opacity: .9; }
.dlg-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.dlg-btn.danger:hover { opacity: .9; }
.dlg-btn:disabled { opacity: .4; cursor: not-allowed; }
/* ── Inline Diff Decorations (CodeMirror DOM) ── */
.cm-diff-added { background: rgba(34, 197, 94, 0.15); }
.cm-diff-deleted { background: rgba(239, 68, 68, 0.1); text-decoration: line-through; color: #999; }
.cm-diff-widget { display: inline-flex; gap: 6px; margin-left: 12px; font-size: 14px; }
.cm-diff-accept { color: #22c55e; cursor: pointer; font-weight: bold; }
.cm-diff-accept:hover { color: #16a34a; }
.cm-diff-reject { color: #ef4444; cursor: pointer; font-weight: bold; }
.cm-diff-reject:hover { color: #dc2626; }
/* ── Wiki spinners (use consolidated spin keyframe) ── */
.wiki-btn-spinner { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t4); border-top-color: var(--acc); animation: spin .6s linear infinite; flex-shrink: 0; }
.wiki-activity-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); animation: streaming-pulse 1.2s ease-in-out infinite; }
.wiki-activity-spinner { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t4); border-top-color: var(--acc); animation: spin .6s linear infinite; flex-shrink: 0; margin-top: 2px; }
/* ── Settings Select ── */
.settings-select {
  width: 100%;
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--brd);
  background-color: var(--inp, var(--surf));
  color: var(--t1);
  font-size: calc(var(--ui-font-size) - 2px);
  font-family: var(--font-ui, system-ui, sans-serif);
  outline: none;
  cursor: pointer;
  transition: border-color 0.1s;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2371717a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.settings-select:focus { border-color: var(--acc); }
.settings-select:hover { border-color: var(--brd2, var(--brd)); }
.settings-select option { background: var(--panel); color: var(--t1); }
/* ponytail: rich-text table borders — bump brightness in dark mode so
   cells stay readable against the panel. Light mode is fine with the
   default brd2 token; dark mode's brd2 (#252d4a) is too dim on panel
   (#0f1219). */
[data-theme="dark"] .ProseMirror th,
[data-theme="dark"] .ProseMirror td { border-color: #3a4470; }
/* ── Responsive / Mobile ── */
.sidebar-wrapper { display: contents; }
.mobile-sidebar-overlay { display: none; }
.mobile-menu-btn { display: none !important; }
@media (max-width: 1024px) {
  .sidebar { width: 200px !important; min-width: 160px; }
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex !important; }
  .sidebar-wrapper { display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 100; transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar-wrapper.mobile.open { transform: translateX(0); }
  .sidebar-wrapper .sidebar { width: 100% !important; height: 100%; max-width: none; border-right: 1px solid var(--brd); }
  .mobile-sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); animation: fadeIn .2s; }
  .resizer { display: none; }
  .settings-page { max-width: 100%; }
  .vault-page { max-width: 100%; }
  .img-paste-dialog { width: 95vw; }
  .img-paste-size-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .sidebar-wrapper { width: 260px; }
  .settings-page { flex-direction: column; }
  .sn { display: none; }
  .sc2 { padding: 13px; max-width: 100%; }
  .vc-grid { grid-template-columns: 1fr; }
  .status-bar { font-size: 9px; padding: 0 8px; height: 22px; }
}
@media (pointer: coarse) {
  .ft-item { padding: 8px 12px; min-height: 40px; }
}
/* ponytail: during a file-tree drag (and the brief post-drop window),
   rows must not light up on :hover and must not fade bg in/out — the
   drop-target highlight (wrapper bg-accglow + dir row's isDragOver)
   should be the only visual signal. pointer-events:none also makes
   elementFromPoint skip rows and hit the wrapper (which carries
   data-dirpath), so drop targeting keeps working. */
.sb-body[data-dragging] .ft-item {
  pointer-events: none !important;
  transition: none !important;
}
.sb-body[data-dragging] .ft-item:hover {
  background-color: transparent !important;
  color: inherit !important;
}
@supports (padding: env(safe-area-inset-top)) {
  .sidebar-wrapper.mobile { padding-left: env(safe-area-inset-left); }
}
/* ══════════════════════════════════════════════════════════════════
   日程工作台 Schedule Workbench (sw- 前缀，scope 到 .schedule-workbench)
   token 别名指向 Quill 主题变量，明暗自动切换
   ══════════════════════════════════════════════════════════════════ */
.schedule-workbench {
  --surface: var(--panel);
  --surface-warm: var(--accglow);
  --fg: var(--t1);
  --fg-2: var(--t2);
  --muted: var(--t3);
  --border: var(--brd);
  --border-soft: var(--surf2);
  --accent: var(--acc);
  --accent-on: #fff;
  --accent-soft: var(--accglow);
  --accent-hover: color-mix(in oklab, var(--acc), black 8%);
  --accent-active: color-mix(in oklab, var(--acc), black 14%);
  --success: var(--green);
  --warn: var(--amber);
  --danger: var(--red);
  --info: var(--cyan);
  --purple: var(--purple);
  --cal-work: var(--acc);
  --cal-personal: var(--purple);
  --cal-family: var(--amber);
  --cal-health: var(--green);
  --cal-task: var(--t2);
  --font-display: var(--font-ui);
  --font-body: var(--font-ui);
  --font-mono: var(--font-mono);
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 15px;
  --text-xl: 16px; --text-2xl: 18px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;
  --elev-ring: 0 0 0 1px var(--brd);
  --elev-raised: 0 8px 24px rgba(0, 0, 0, 0.12);
  --focus-ring: 0 0 0 2px var(--accdim);
  --motion-fast: 140ms; --motion-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --hour-h: 48px; --sidebar-w: 200px;

  display: grid; grid-template-columns: var(--sidebar-w) 1fr;
  height: 100%; width: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.schedule-workbench *, .schedule-workbench *::before, .schedule-workbench *::after { box-sizing: border-box; }
.schedule-workbench button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.schedule-workbench input, .schedule-workbench textarea, .schedule-workbench select { font: inherit; color: inherit; }
.schedule-workbench ul { margin: 0; padding: 0; list-style: none; }
.schedule-workbench h1, .schedule-workbench h2, .schedule-workbench h3, .schedule-workbench h4 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
.schedule-workbench :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* sidebar */
.sw-sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0; overflow-y: auto; }
.sw-panel-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.5px; }
.sw-add-btn { margin-left: auto; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: var(--t2); background: transparent; border: 0; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.sw-add-btn:hover { background: var(--hov); color: var(--t1); }
.sw-nav-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.sw-nav-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--fg-2); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--motion-fast) var(--ease-standard); position: relative; width: 100%; text-align: left; }
.sw-nav-item:hover { background: var(--border-soft); color: var(--fg); }
.sw-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sw-nav-item.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; background: var(--accent); border-radius: 0 2px 2px 0; }
.sw-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sw-nav-item .sw-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.sw-nav-item.active .sw-count { color: var(--accent); }
.sw-avatar { width: 30px; height: 30px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.sw-uname { font-size: var(--text-sm); font-weight: 500; }
.sw-umail { font-size: 11px; color: var(--muted); }
/* main + topbar */
.sw-main { display: grid; grid-template-rows: 1fr; min-width: 0; overflow: hidden; }
.sw-topbar { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.sw-topbar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.sw-topbar-sub { color: var(--muted); font-size: var(--text-xs); margin-left: var(--space-3); }
.sw-topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.sw-search { display: flex; align-items: center; gap: var(--space-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; color: var(--muted); font-size: var(--text-xs); }
.sw-search svg { width: 14px; height: 14px; opacity: 0.7; }
.sw-search input { border: 0; background: transparent; outline: none; width: 140px; font-size: var(--text-xs); color: var(--fg); }
.sw-search kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; color: var(--muted); }
.sw-icon-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--fg-2); position: relative; transition: background var(--motion-fast) var(--ease-standard); }
.sw-icon-btn:hover { background: var(--border-soft); }
.sw-view { display: none; height: 100%; min-height: 0; overflow: hidden; }
.sw-view.active { display: grid; }
/* schedule view */
.sw-view-schedule { grid-template-columns: 220px 1fr 280px; }
.sw-rail { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: var(--space-5); }
.sw-rail.right { border-right: 0; border-left: 1px solid var(--border); }
.sw-section-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--fg); margin: 0 0 var(--space-3); letter-spacing: -0.005em; }
.sw-rail-block { margin-bottom: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.sw-rail-block:first-child { padding-top: 0; border-top: 0; }
.sw-view-switch { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; margin-bottom: var(--space-5); }
.sw-view-switch button { padding: 5px 0; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; color: var(--muted); transition: all var(--motion-fast) var(--ease-standard); }
.sw-view-switch button.active { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.sw-mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.sw-mini-cal-month { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.sw-mini-cal-nav { display: flex; gap: 2px; }
.sw-mini-cal-nav button { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; color: var(--muted); }
.sw-mini-cal-nav button:hover { background: var(--border-soft); color: var(--fg); }
.sw-mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-family: var(--font-mono); font-size: 11px; }
.sw-mini-cal-grid .sw-dow { text-align: center; color: var(--muted); padding: 4px 0; font-size: 10px; }
.sw-mini-cal-grid .sw-d { aspect-ratio: 1; display: grid; place-items: center; color: var(--fg-2); border-radius: 4px; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); position: relative; }
.sw-mini-cal-grid .sw-d:hover { background: var(--border-soft); }
.sw-mini-cal-grid .sw-d.muted { color: var(--muted); opacity: 0.5; }
.sw-mini-cal-grid .sw-d.today { background: var(--accent); color: var(--accent-on); font-weight: 600; }
.sw-mini-cal-grid .sw-d.selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; outline: 2px solid var(--accent); outline-offset: -2px; }
.sw-mini-cal-grid .sw-d.has-over::before { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.sw-cal-list { display: flex; flex-direction: column; gap: 2px; }
.sw-cal-item { display: flex; align-items: center; gap: var(--space-3); padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); color: var(--fg-2); transition: background var(--motion-fast) var(--ease-standard); }
.sw-cal-item:hover { background: var(--border-soft); }
.sw-cal-item.off { opacity: 0.4; }
.sw-cal-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sw-cal-item .sw-count { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.sw-cal-main { display: flex; flex-direction: column; background: var(--surface); min-width: 0; overflow: hidden; }
.sw-cal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.sw-cal-toolbar .sw-left { display: flex; align-items: center; gap: var(--space-3); }
.sw-nav-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--fg-2); transition: background var(--motion-fast) var(--ease-standard); }
.sw-nav-btn:hover { background: var(--border-soft); }
.sw-today-btn { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--fg); font-size: var(--text-sm); font-weight: 500; transition: border-color var(--motion-fast) var(--ease-standard); }
.sw-today-btn:hover { border-color: var(--accent); color: var(--accent); }
.sw-range-label { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; min-width: 220px; text-align: center; letter-spacing: -0.01em; }
.sw-cal-toolbar .sw-right { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.sw-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sw-cal-scroll { flex: 1; overflow-x: hidden; overflow-y: auto; }
.sw-week-grid { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); min-width: 0; position: relative; }
.sw-week-head { display: contents; }
.sw-week-head .sw-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.sw-week-head .sw-day-col-head { padding: var(--space-3); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border-soft); text-align: center; }
.sw-week-head .sw-day-col-head .sw-dow { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.sw-week-head .sw-day-col-head .sw-dom { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); margin-top: 2px; }
.sw-week-head .sw-day-col-head.today .sw-dom, .sw-week-head .sw-day-col-head.today .sw-dow { color: var(--accent); }
.sw-week-head .sw-day-col-head.selected .sw-dom { color: var(--accent); }
.sw-week-head .sw-day-col-head.selected { background: var(--accent-soft); }
.sw-hour-col { border-right: 1px solid var(--border); background: var(--surface); position: sticky; left: 0; z-index: 1; }
.sw-hour-cell { height: var(--hour-h); border-bottom: 1px solid var(--border-soft); padding: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.sw-day-col { border-right: 1px solid var(--border-soft); position: relative; min-height: calc(var(--hour-h) * 24); }
.sw-day-col .sw-slot { height: var(--hour-h); border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); }
.sw-day-col .sw-slot:hover { background: var(--surface-warm); }
.sw-day-col.today-col { background: linear-gradient(180deg, var(--accent-soft), transparent 30%); }
.sw-day-col.selected-col { background: var(--accent-soft); }
.sw-day-col.drop-target { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.sw-day-col .sw-slot.drop-target { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.sw-event { position: absolute; left: 4px; right: 4px; border-radius: var(--radius-sm); padding: 5px 8px; font-size: 11px; line-height: 1.3; color: var(--fg); border-left: 3px solid var(--t3); background: var(--surface-warm); overflow: hidden; cursor: pointer; transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); z-index: 1; }
.sw-event:hover { transform: translateY(-1px); box-shadow: 0 1px 4px rgba(0,0,0,0.08); z-index: 3; }
.sw-event--task { border-left-color: var(--cal-task); background: color-mix(in oklab, var(--cal-task), transparent 88%); border-style: dashed; cursor: grab; }
.sw-event.dragging { opacity: 0.4; }
.sw-event .sw-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted); display: block; }
.sw-event .sw-title { font-weight: 500; color: var(--fg); display: block; }
.sw-event.short { padding: 3px 6px; }
.sw-event.short .sw-time { display: none; }
/* AI 规划今日 — preview overlay + proposed blocks */
.sw-plan-overlay { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; }
.sw-plan-backdrop { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg), transparent 40%); backdrop-filter: blur(2px); }
.sw-plan-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(560px, 92vw); max-height: 84vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.18); overflow: hidden; }
.sw-plan-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.sw-plan-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.sw-plan-title svg { color: var(--accent); }
.sw-plan-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 4px; }
.sw-plan-actions { display: flex; gap: 6px; }
.sw-plan-accept { padding: 5px 12px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-on); font-size: var(--text-xs); font-weight: 600; transition: background var(--motion-fast) var(--ease-standard); }
.sw-plan-accept:hover:not(:disabled) { background: var(--accent-hover); }
.sw-plan-accept:disabled { opacity: 0.4; cursor: not-allowed; }
.sw-plan-reject { padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--t2); font-size: var(--text-xs); font-weight: 500; transition: border-color var(--motion-fast) var(--ease-standard); }
.sw-plan-reject:hover { border-color: var(--accent); color: var(--accent); }
.sw-plan-notes { margin: 0; padding: 8px 14px; font-size: var(--text-xs); color: var(--t2); background: var(--bg); border-bottom: 1px solid var(--border-soft); }
.sw-plan-empty { margin: 0; padding: 12px 14px; font-size: var(--text-xs); color: var(--t3); }
.sw-plan-timeline { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 48px 1fr; min-height: 0; }
.sw-plan-day { position: relative; min-height: calc(var(--hour-h) * 24); }
.sw-plan-day .sw-slot { height: var(--hour-h); border-bottom: 1px solid var(--border-soft); }
.sw-plan-block { border-style: dashed; border-width: 1px; border-left-width: 3px; background: color-mix(in oklab, var(--accent), transparent 82%); border-color: color-mix(in oklab, var(--accent), transparent 30%); cursor: grab; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.sw-plan-block.unchecked { opacity: 0.4; }
.sw-plan-block.scheduled { border-left-color: var(--cal-task); background: color-mix(in oklab, var(--cal-task), transparent 84%); }
.sw-plan-block.newTask { border-left-color: var(--cal-work); background: color-mix(in oklab, var(--cal-work), transparent 84%); }
.sw-plan-block.newEvent { border-left-color: var(--cal-health); background: color-mix(in oklab, var(--cal-health), transparent 84%); }
.sw-plan-block.dragging { opacity: 0.6; cursor: grabbing; box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 4; }
.sw-plan-block .sw-plan-check { position: absolute; top: 3px; right: 4px; width: 16px; height: 16px; border-radius: 3px; display: grid; place-items: center; font-size: 11px; line-height: 1; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--accent); }
.sw-plan-block.unchecked .sw-plan-check { color: var(--muted); }
.sw-plan-block .sw-plan-handle { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.sw-plan-block.confirmed, .sw-event.confirmed { border-style: solid; opacity: 0.55; cursor: default; }
.sw-plan-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.sw-plan-legend .sw-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sw-plan-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: var(--radius-sm); border: 1px dashed var(--border); color: var(--t2); font-size: var(--text-xs); font-weight: 500; transition: all var(--motion-fast) var(--ease-standard); }
.sw-plan-trigger:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sw-plan-trigger svg { flex-shrink: 0; }
.sw-plan-status { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0,0,0,0.18); min-width: 240px; }
.sw-plan-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: sw-spin 0.7s linear infinite; }
@keyframes sw-spin { to { transform: rotate(360deg); } }
.sw-plan-error-msg, .sw-plan-result-msg { margin: 0; font-size: var(--text-sm); color: var(--fg); text-align: center; }
.sw-plan-failed { margin: 0; padding: 0; list-style: none; max-height: 140px; overflow-y: auto; font-size: 11px; color: var(--t3); }
.sw-plan-failed li { padding: 2px 0; border-bottom: 1px solid var(--border-soft); }
.sw-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.sw-now-line::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
/* right rail */
.sw-quick-add { display: flex; gap: var(--space-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px 3px 3px 10px; margin-bottom: var(--space-5); }
.sw-quick-add input { flex: 1; border: 0; background: transparent; outline: none; font-size: var(--text-xs); padding: 4px 0; color: var(--fg); }
.sw-quick-add button { padding: 4px 10px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-on); font-size: 11px; font-weight: 500; }
.sw-quick-add button:hover { background: var(--accent-hover); }
.sw-pomo { background: var(--surf2); color: var(--t1); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5) var(--space-5); margin-bottom: var(--space-5); position: relative; overflow: hidden; }
.sw-pomo::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--accglow), transparent 70%); }
.sw-pomo .sw-label { font-family: var(--font-mono); font-size: 10px; color: var(--t3); position: relative; }
.sw-pomo .sw-timer { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: var(--space-2) 0 var(--space-3); font-variant-numeric: tabular-nums; position: relative; }
.sw-pomo .sw-mode { font-size: 11px; color: var(--t3); margin-bottom: var(--space-4); position: relative; }
.sw-pomo .sw-ctrls { display: flex; gap: var(--space-2); position: relative; }
.sw-pomo .sw-ctrls button { flex: 1; padding: 7px 0; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; background: var(--hov); color: var(--t1); transition: background var(--motion-fast) var(--ease-standard); }
.sw-pomo .sw-ctrls button:hover { background: var(--act); }
.sw-pomo .sw-ctrls button.primary { background: var(--accent); color: var(--accent-on); }
.sw-pomo .sw-ctrls button.primary:hover { background: var(--accent-hover); }
.sw-pomo .sw-pomo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); position: relative; }
.sw-pomo .sw-pomo-notify { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--t3); cursor: pointer; }
.sw-pomo .sw-pomo-notify input { width: auto; }
.sw-modal .sw-notify-field > label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); cursor: pointer; }
.sw-modal .sw-notify-field > label input { width: auto; }
.sw-modal .sw-notify-lead { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.sw-modal .sw-notify-lead input { width: 60px; padding: 4px 8px; }
.sw-task-list { display: flex; flex-direction: column; gap: 2px; }
.sw-task { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-3); align-items: flex-start; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); }
.sw-task:hover { background: var(--border-soft); }
.sw-task .sw-check { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; display: grid; place-items: center; color: transparent; transition: all var(--motion-fast) var(--ease-standard); margin-top: 1px; font-size: 11px; }
.sw-task.done .sw-check { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.sw-task .sw-body { display: block; font-size: var(--text-sm); color: var(--fg); line-height: 1.4; }
.sw-task.done .sw-body { color: var(--muted); text-decoration: line-through; }
.sw-task .sw-meta { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 2px; }
.sw-task .sw-prio { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; }
.sw-task .sw-src { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--border-soft); color: var(--muted); margin-right: 6px; vertical-align: middle; }
.sw-reminder { display: flex; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.sw-reminder:last-child { border-bottom: 0; }
.sw-reminder .sw-rtime { font-family: var(--font-mono); font-size: 11px; color: var(--muted); width: 50px; flex-shrink: 0; }
.sw-reminder .sw-rbody { color: var(--fg-2); line-height: 1.4; }
.sw-reminder .sw-rbody b { color: var(--fg); font-weight: 500; }
/* board view */
.sw-view-board { grid-template-rows: 1fr; }
.sw-board-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); }
.sw-board-toolbar .sw-left { display: flex; align-items: center; gap: var(--space-4); }
.sw-board-toolbar .sw-page-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.sw-board-toolbar .sw-page-sub { color: var(--muted); font-size: var(--text-xs); }
.sw-board-toolbar .sw-right { display: flex; align-items: center; gap: var(--space-3); }
.sw-avatars { display: flex; }
.sw-avatars .sw-av { width: 28px; height: 28px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; }
.sw-avatars .sw-av:first-child { margin-left: 0; }
.sw-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--fg-2); transition: border-color var(--motion-fast) var(--ease-standard); }
.sw-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.sw-board-scroll { overflow-x: auto; overflow-y: hidden; padding: 0; flex: 1; min-width: 0; }
.sw-board-layout { display: flex; gap: var(--space-2); height: 100%; min-width: 0; align-items: stretch; }
.sw-board-daycal { width: 240px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sw-daycal-head { display: flex; align-items: center; justify-content: space-between; }
.sw-daycal-month { font-size: var(--text-sm); font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.sw-daycal-nav { display: flex; gap: 2px; }
.sw-daycal-nav button { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; color: var(--muted); font-size: 14px; line-height: 1; }
.sw-daycal-nav button:hover { background: var(--border-soft); color: var(--fg); }
.sw-daycal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-family: var(--font-mono); font-size: 11px; }
.sw-daycal-grid .sw-dow { text-align: center; color: var(--muted); padding: 4px 0; font-size: 10px; }
.sw-daycal-grid .sw-d { aspect-ratio: 1; display: grid; place-items: center; color: var(--fg-2); border-radius: 4px; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard); position: relative; }
.sw-daycal-grid .sw-d:hover { background: var(--border-soft); }
.sw-daycal-grid .sw-d.muted { color: var(--muted); opacity: 0.5; }
.sw-daycal-grid .sw-d.today { color: var(--accent); font-weight: 700; }
.sw-daycal-grid .sw-d.today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.sw-daycal-grid .sw-d.selected { background: var(--accent); color: var(--accent-on); font-weight: 600; }
.sw-daycal-grid .sw-d.selected.today::after { background: var(--accent-on); }
.sw-daycal-grid .sw-d.has-over::before { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.sw-daycal-grid .sw-d.selected.has-over::before { background: var(--accent-on); }
.sw-daycal-grid .sw-d.cal-drop-target { background: var(--accent); color: var(--accent-on); outline: 2px solid var(--accent); outline-offset: -2px; }
.sw-daycal-legend { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--muted); }
.sw-daycal-legend > div { display: flex; align-items: center; gap: 6px; }
.sw-lg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sw-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: var(--space-2); height: 100%; min-width: -moz-min-content; min-width: min-content; }
.sw-col { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 0; }
.sw-col-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border-soft); position: relative; }
.sw-col-head.drop-target-col { background: var(--accent-soft); }
.sw-col-head.drop-target-col::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 2px; z-index: 5; }
.sw-col-head .sw-left { display: flex; align-items: center; gap: var(--space-3); }
.sw-col-dot { width: 8px; height: 8px; border-radius: 50%; }
.sw-col-name { font-size: var(--text-sm); font-weight: 600; color: var(--fg); letter-spacing: -0.01em; cursor: text; }
.sw-col-name-input { font-size: var(--text-sm); font-weight: 600; color: var(--fg); background: var(--inp); border: 1px solid var(--acc); border-radius: var(--radius-sm); padding: 2px 6px; outline: none; min-width: 0; width: 80px; }
.sw-col-del { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: var(--t3); font-size: 12px; line-height: 1; flex-shrink: 0; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.sw-col-del:hover { background: color-mix(in oklab, var(--red), transparent 88%); color: var(--red); }
.sw-col-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 2px 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.sw-col-body { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.sw-col-body.drop-target { background: var(--surface-warm); }
.sw-col-add { background: transparent; border: 1px dashed var(--border); align-items: center; justify-content: center; min-width: 200px; }
.sw-col-add-btn { width: 100%; padding: 10px; color: var(--t3); font-size: var(--text-sm); text-align: center; border-radius: var(--radius-sm); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.sw-col-add-btn:hover { background: var(--hov); color: var(--t1); }
.sw-col-add-input { width: 100%; padding: 8px 10px; font-size: var(--text-sm); color: var(--fg); background: var(--inp); border: 1px solid var(--acc); border-radius: var(--radius-sm); outline: none; }
.sw-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); cursor: grab; transition: box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); position: relative; }
.sw-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); transform: translateY(-1px); }
.sw-card.dragging { opacity: 0.4; cursor: grabbing; }
.sw-card .sw-card-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; color: var(--t3); font-size: 11px; line-height: 1; background: transparent; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); z-index: 2; }
.sw-card:hover .sw-card-del { opacity: 1; }
.sw-card .sw-card-del:hover { background: color-mix(in oklab, var(--red), transparent 88%); color: var(--red); }
.sw-card.dragging .sw-card-del { display: none; }
.sw-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); padding-right: 24px; }
.sw-card-top .sw-card-tags { display: inline-flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.sw-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.sw-tag.design { background: color-mix(in oklab, var(--purple), transparent 88%); color: var(--purple); }
.sw-tag.dev { background: color-mix(in oklab, var(--acc), transparent 88%); color: var(--acc); }
.sw-tag.bug { background: color-mix(in oklab, var(--red), transparent 88%); color: var(--red); }
.sw-tag.growth { background: color-mix(in oklab, var(--green), transparent 88%); color: var(--green); }
.sw-tag.ops { background: color-mix(in oklab, var(--cyan), transparent 88%); color: var(--cyan); }
.sw-tag.calendar { background: color-mix(in oklab, var(--t2), transparent 88%); color: var(--t2); }
.sw-tag.learn { background: color-mix(in oklab, var(--amber), transparent 88%); color: var(--amber); }
.sw-prio { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sw-prio.high { background: var(--danger); }
.sw-prio.med { background: var(--warn); }
.sw-prio.low { background: var(--muted); }
.sw-card h4 { font-size: var(--text-sm); font-weight: 600; color: var(--fg); line-height: 1.4; margin-bottom: var(--space-2); letter-spacing: -0.005em; }
.sw-card p { margin: 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.5; margin-bottom: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.sw-card-meta { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-family: var(--font-mono); font-size: 11px; flex-wrap: wrap; }
.sw-card-meta .sw-chip { display: inline-flex; align-items: center; gap: 4px; }
.sw-card-meta svg { width: 12px; height: 12px; opacity: 0.7; }
.sw-card-meta .due-soon { color: var(--warn); }
.sw-card-meta .due-over { color: var(--danger); }
.sw-progress { display: flex; align-items: center; gap: 6px; }
.sw-progress .sw-bar { width: 60px; height: 4px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.sw-progress .sw-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.sw-progress .sw-pct { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.sw-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-6) var(--space-4); color: var(--muted); text-align: center; }
.sw-empty-state .sw-empty-icon { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--border); display: grid; place-items: center; color: var(--muted); opacity: 0.7; }
.sw-empty-state .sw-empty-icon svg { width: 14px; height: 14px; }
.sw-empty-state .sw-empty-text { font-size: var(--text-xs); line-height: 1.5; }
.sw-empty-state .sw-empty-hint { font-family: var(--font-mono); font-size: 10px; color: var(--muted); opacity: 0.7; letter-spacing: 0.04em; }
/* unscheduled dock */
.sw-unsched-dock { display: flex; flex-direction: column; gap: var(--space-2); }
.sw-dock-chip { display: flex; align-items: center; gap: var(--space-2); padding: 7px 28px 7px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--fg-2); font-size: var(--text-xs); color: var(--fg); cursor: grab; transition: box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); position: relative; }
.sw-dock-chip:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.06); transform: translateY(-1px); }
.sw-dock-chip.dragging { opacity: 0.4; }
.sw-dock-chip .sw-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-dock-chip .sw-cat { font-family: var(--font-mono); font-size: 9px; color: var(--muted); }
.sw-dock-del { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 11px; color: var(--t3); background: transparent; border: 0; cursor: pointer; opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard); }
.sw-dock-chip:hover .sw-dock-del { opacity: 1; }
.sw-dock-del:hover { background: var(--hov); color: var(--danger); }
.sw-dock-empty { font-size: 11px; color: var(--muted); padding: var(--space-2); text-align: center; font-style: italic; }
.sw-section-hint { font-size: 10px; color: var(--muted); margin: var(--space-2) 0 0; line-height: 1.4; }
/* modal */
.sw-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; }
.sw-overlay.open { display: flex; animation: sw-overlay-enter 140ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes sw-overlay-enter { from { opacity: 0; } to { opacity: 1; } }
.sw-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); width: 460px; max-width: calc(100vw - 32px); padding: var(--space-6); animation: sw-modal-enter 180ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes sw-modal-enter { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sw-modal h3 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.sw-modal .sw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.sw-modal .sw-field label { font-size: 12px; color: var(--muted); }
.sw-modal .sw-field.sw-notify-field { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sw-modal input, .sw-modal textarea, .sw-modal select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: var(--text-sm); background: var(--surface); width: 100%; color: var(--fg); }
.sw-modal input[type=text], .sw-modal input[type=time], .sw-modal select { height: 38px; box-sizing: border-box; }
.sw-modal input:focus, .sw-modal textarea:focus, .sw-modal select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sw-modal textarea { min-height: 72px; resize: vertical; }
.sw-modal .sw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sw-modal .sw-seg-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sw-modal .sw-seg-inline label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--fg-2); cursor: pointer; position: relative; }
.sw-modal .sw-seg-inline input { width: auto; position: absolute; opacity: 0; }
.sw-modal .sw-seg-inline label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sw-modal .sw-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.sw-modal .sw-btn { padding: 8px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), background 100ms; display: inline-flex; align-items: center; gap: 6px; }
.sw-modal .sw-btn svg { flex-shrink: 0; }
.sw-modal .sw-btn:active { transform: scale(0.96); }
.sw-modal .sw-btn-primary { background: var(--accent); color: var(--accent-on); }
.sw-modal .sw-btn-primary:hover { background: var(--accent-hover); }
.sw-modal .sw-btn-ghost { color: var(--muted); }
.sw-modal .sw-btn-ghost:hover { color: var(--fg); }
.sw-modal .sw-btn-ghost-subtle { color: var(--muted); }
.sw-modal .sw-btn-ghost-subtle:hover { color: var(--accent); background: var(--accent-soft); }
.sw-modal .sw-btn-danger-ghost { color: var(--muted); }
.sw-modal .sw-btn-danger-ghost:hover { color: var(--danger); background: color-mix(in oklab, var(--danger), transparent 92%); }
.sw-sq3r-modal .sw-actions .sw-btn-danger-ghost { margin-right: auto; }
.sw-sq3r-modal { width: 680px; max-width: min(92vw, 720px); display: flex; flex-direction: column; }
.sw-sq3r-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.sw-sq3r-head h3 { margin-bottom: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sq3r-chip { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--muted); background: var(--surface); }
.sw-sq3r-viewmode { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sw-sq3r-vseg { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 4px; color: var(--t3); cursor: pointer; transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), color 120ms cubic-bezier(0.2, 0, 0, 1); }
.sw-sq3r-vseg:hover:not(:disabled) { color: var(--t2); background: var(--hov); }
.sw-sq3r-vseg.active { color: var(--acc); background: var(--accdim); }
.sw-sq3r-vseg:disabled { opacity: 0.45; cursor: not-allowed; }
.sw-sq3r-vseg svg { display: block; }
.sw-sq3r-chip.cache { color: var(--success); border-color: color-mix(in oklab, var(--success), transparent 60%); background: color-mix(in oklab, var(--success), transparent 92%); }
.sw-sq3r-chip.new { color: var(--accent); border-color: color-mix(in oklab, var(--accent), transparent 60%); background: var(--accent-soft); }
.sw-sq3r-chip.loading { color: var(--muted); animation: sw-pulse 1.4s ease-in-out infinite; }
@keyframes sw-pulse { 50% { opacity: 0.55; } }
.sw-sq3r-body { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); min-height: 240px; max-height: 56vh; overflow: auto; }
.sw-sq3r-body.sw-sq3r-body-split { display: flex; overflow: hidden; height: min(56vh, 560px); min-height: 320px; }
.sw-sq3r-split { display: flex; flex: 1; min-width: 0; }
.sw-sq3r-split .sw-sq3r-edit { flex: 1 1 50%; min-width: 0; min-height: 0; width: auto; height: auto; border: 0; border-right: 1px solid var(--border); border-radius: 0; resize: none; overflow-y: auto; }
.sw-sq3r-split-preview { flex: 1 1 50%; min-width: 0; min-height: 0; overflow-y: auto; }
.sw-sq3r-preview { padding: var(--space-4) var(--space-5); }
.sw-sq3r-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 240px; color: var(--muted); font-size: var(--text-sm); }
.sw-sq3r-spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--accent), transparent 75%); border-top-color: var(--accent); animation: sw-spin 0.7s linear infinite; flex-shrink: 0; }
.sw-sq3r-spinner-sm { width: 12px; height: 12px; border-width: 2px; }
.sw-sq3r-stream-hint { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; color: var(--accent); background: color-mix(in oklab, var(--surface), transparent 10%); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border-soft); }
.sw-sq3r-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 240px; color: var(--muted); font-size: var(--text-sm); }
.sw-sq3r-edit { width: 100%; box-sizing: border-box; min-height: 320px; border: 0; outline: none; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); line-height: 1.6; padding: var(--space-4) var(--space-5); background: transparent; color: var(--fg); }
.sw-sq3r-edit:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.sw-modal .sw-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sw-modal .sw-btn-danger { background: var(--danger); color: #fff; }
.sw-modal .sw-btn-danger:hover { filter: brightness(0.95); }
.sw-modal .sw-detail-value { font-size: var(--text-sm); color: var(--fg); padding: 9px 0; }
.sw-modal .sw-detail-note { white-space: pre-wrap; padding: 9px 12px; background: var(--surface-warm); border-radius: var(--radius-sm); }
.sw-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--t1); color: var(--bg); padding: 10px 18px; border-radius: var(--radius-pill); font-size: 13px; opacity: 0; pointer-events: none; transition: all var(--motion-base) var(--ease-standard); z-index: 200; display: flex; align-items: center; gap: 12px; max-width: min(90vw, 480px); }
.sw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.sw-toast .sw-toast-msg { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 1.35; }
.sw-toast .sw-toast-action { background: transparent; border: 0; color: var(--accent); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; }
.sw-toast .sw-toast-action:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 1100px) {
  .schedule-workbench { --sidebar-w: 180px; }
  .sw-view-schedule { grid-template-columns: 200px 1fr 280px; }
}
@media (max-width: 900px) {
  .sw-view-schedule { grid-template-columns: 1fr; }
  .sw-view-schedule .sw-rail, .sw-view-schedule .sw-rail.right { display: none; }
  .sw-search { display: none; }
  .schedule-workbench { --sidebar-w: 60px; }
  .sw-panel-header span, .sw-add-btn { display: none; }
  .sw-nav-item span:not(.sw-count) { display: none; }
  .sw-nav-item { justify-content: center; }
}
/* ── FileViewer spreadsheet toolbar override ──
 * Renderer default: min-height 44px, padding 8px 12px — too tall for the
 * compact preview pane. !important needed because the renderer injects its
 * own  at mount, which would win on equal specificity.
 */
.excel-wrapper .toolbar { min-height: 22px !important; padding: 2px 10px !important; }
.excel-wrapper .sheet-tab { height: 22px !important; padding: 0 10px !important; font-size: 11px !important; }
.excel-wrapper .e-virt-table-stage { border-radius: 0 !important; }
/* Hide the sheet-tabs bar (Sheet1 button) but keep the .summary text
 * ("共 X 行，Y 列") so the bottom line stays informative without the
 * redundant single-sheet tab. */
.excel-wrapper .toolbar .btn-group { display: none !important; }
.excel-wrapper .toolbar .summary { font-size: 11px !important; font-weight: 500 !important; }
/* ── Editor search/replace panel (VS Code style) ── */
.ed-search-panel {
  position: absolute; top: 8px; right: 12px; z-index: 20;
  display: flex; align-items: flex-start; gap: 4px;
  background: var(--surf2); border: 1px solid var(--brd);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .02);
  padding: 6px; width: 380px;
  font-size: 12px; color: var(--t1);
}
.ed-search-toggle-replace {
  flex: 0 0 auto; width: 20px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--t3); cursor: pointer; padding: 0;
}
.ed-search-toggle-replace:hover { background: var(--hov); color: var(--t1); }
.ed-search-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-search-row {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--brd2); border-radius: 4px;
  padding: 2px 4px; background: var(--panel);
  overflow: hidden;
}
.ed-search-input-wrap {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center;
}
.ed-search-input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: none;
  background: transparent; color: var(--t1);
  font-family: var(--font-mono); font-size: 12px;
  padding: 2px 4px; padding-right: 72px; border-radius: 2px;
}
.ed-search-input::-moz-placeholder { color: var(--t3); }
.ed-search-input::placeholder { color: var(--t3); }
.ed-search-input::-moz-selection {
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
}
.ed-search-input::selection {
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
}
.ed-search-input *::-moz-selection {
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
}
.ed-search-input *::selection {
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--acc);
  text-decoration-thickness: 2px;
  text-underline-offset: 1px;
}
.ed-search-input:focus { box-shadow: 0 0 0 2px var(--accglow); }
.ed-search-toggles {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px;
}
.ed-search-toggle {
  width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 3px; color: var(--t3);
  font-size: 11px; font-family: var(--font-mono); cursor: pointer;
  line-height: 1;
}
.ed-search-toggle:hover { background: var(--hov); color: var(--t1); }
.ed-search-toggle.active {
  background: var(--accdim); color: var(--acc);
  border-color: color-mix(in srgb, var(--acc) 30%, transparent);
}
.ed-search-count {
  flex: 0 0 auto; min-width: 60px; padding: 0 6px;
  color: var(--t3); font-size: 11px; text-align: right;
  white-space: nowrap;
}
.ed-search-nav { display: flex; gap: 2px; }
.ed-search-nav button, .ed-search-actions button {
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--t2); cursor: pointer;
}
.ed-search-nav button:hover, .ed-search-actions button:hover {
  background: var(--hov); color: var(--t1);
}
.ed-search-nav button:disabled, .ed-search-actions button:disabled {
  opacity: .4; cursor: default;
}
.ed-search-close { margin-left: 2px; }
/* ponytail: hide mind-elixir's built-in direction toolbar (.lt). The preview
   has its own React direction buttons (right-edge vertical strip); the
   library's bundled toolbar would duplicate them. */
.mind-elixir-toolbar.lt { display: none !important; }
/* ── Mind map (markmap) rendering quality ──
 * The body sets -webkit-font-smoothing: antialiased which makes text appear
 * thin on macOS, especially Chinese fonts (PingFang SC). Combined with the
 * CSS transform: translate3d() on .map-canvas (GPU compositing layer), the
 * text can look blurry. Restore subpixel rendering for sharper text, and
 * use geometricPrecision for SVG branch lines.
 */
.map-container {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
.map-container svg {
  /* geometricPrecision preserves anti-aliasing but improves precision for
     curved branch lines — crispEdges would make bezier curves jagged. */
  shape-rendering: geometricPrecision;
}
.map-container .map-canvas {
  /* Hint the browser to keep the compositing layer for the 3D transform
     (translate3d) optimized, preventing resolution loss on Retina. */
  will-change: transform;
}
/* ponytail: markmap-view sets `--markmap-text-color: #333` on its own
   `.markmap` (the SVG), which beats inheriting `.markmap-container`'s vars.
   Target `.markmap` from the container for sufficient specificity. */
.markmap-container .markmap {
  --markmap-text-color: #1f2328;
  --markmap-circle-open-bg: #fff;
}
[data-theme='dark'] .markmap-container .markmap {
  --markmap-text-color: #e6edf3;
  --markmap-circle-open-bg: #1f2030;
  --markmap-code-bg: #1a1b26;
  --markmap-code-color: #ddd;
}
.placeholder\:text-t3::-moz-placeholder{
  color: var(--t3);
}
.placeholder\:text-t3::placeholder{
  color: var(--t3);
}
.before\:inline-block::before{
  content: var(--tw-content);
  display: inline-block;
}
.before\:h-2\.5::before{
  content: var(--tw-content);
  height: 0.625rem;
}
.before\:w-\[3px\]::before{
  content: var(--tw-content);
  width: 3px;
}
.before\:shrink-0::before{
  content: var(--tw-content);
  flex-shrink: 0;
}
.before\:rounded-\[2px\]::before{
  content: var(--tw-content);
  border-radius: 2px;
}
.before\:bg-acc::before{
  content: var(--tw-content);
  background-color: var(--acc);
}
.before\:content-\[\'\'\]::before{
  --tw-content: '';
  content: var(--tw-content);
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:border-r-0:last-child{
  border-right-width: 0px;
}
.empty\:before\:text-t4:empty::before{
  content: var(--tw-content);
  color: var(--t4);
}
.empty\:before\:content-\[attr\(data-placeholder\)\]:empty::before{
  --tw-content: attr(data-placeholder);
  content: var(--tw-content);
}
.focus-within\:border-acc:focus-within{
  border-color: var(--acc);
}
.focus-within\:shadow-\[0_0_0_3px_var\(--accglow\)\]:focus-within{
  --tw-shadow: 0 0 0 3px var(--accglow);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:translate-y-\[-1px\]:hover{
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover{
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#c0392b\]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(192 57 43 / var(--tw-border-opacity, 1));
}
.hover\:border-acc:hover{
  border-color: var(--acc);
}
.hover\:border-brd:hover{
  border-color: var(--brd);
}
.hover\:border-brd2:hover{
  border-color: var(--brd2);
}
.hover\:border-l-acc:hover{
  border-left-color: var(--acc);
}
.hover\:bg-\[\#16a34a\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#c0392b\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(192 57 43 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#dc2626\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[rgba\(224\2c 82\2c 52\2c \.08\)\]:hover{
  background-color: rgba(224,82,52,.08);
}
.hover\:bg-\[rgba\(224\2c 82\2c 82\2c \.08\)\]:hover{
  background-color: rgba(224,82,82,.08);
}
.hover\:bg-\[var\(--hov\)\]:hover{
  background-color: var(--hov);
}
.hover\:bg-acc:hover{
  background-color: var(--acc);
}
.hover\:bg-accdim:hover{
  background-color: var(--accdim);
}
.hover\:bg-brd:hover{
  background-color: var(--brd);
}
.hover\:bg-hov:hover{
  background-color: var(--hov);
}
.hover\:bg-red:hover{
  background-color: var(--red);
}
.hover\:bg-surf2:hover{
  background-color: var(--surf2);
}
.hover\:text-\[\#d04545\]:hover{
  --tw-text-opacity: 1;
  color: rgb(208 69 69 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#e53935\]:hover{
  --tw-text-opacity: 1;
  color: rgb(229 57 53 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#f06a6a\]:hover{
  --tw-text-opacity: 1;
  color: rgb(240 106 106 / var(--tw-text-opacity, 1));
}
.hover\:text-\[var\(--green\)\]:hover{
  color: var(--green);
}
.hover\:text-\[var\(--t1\)\]:hover{
  color: var(--t1);
}
.hover\:text-acc:hover{
  color: var(--acc);
}
.hover\:text-red:hover{
  color: var(--red);
}
.hover\:text-t1:hover{
  color: var(--t1);
}
.hover\:text-t2:hover{
  color: var(--t2);
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:\!opacity-100:hover{
  opacity: 1 !important;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-30:hover{
  opacity: 0.3;
}
.hover\:opacity-60:hover{
  opacity: 0.6;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:opacity-\[\.88\]:hover{
  opacity: .88;
}
.hover\:shadow-\[0_1px_4px_rgba\(0\2c 0\2c 0\2c \.08\)\]:hover{
  --tw-shadow: 0 1px 4px rgba(0,0,0,.08);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c \.12\)\]:hover{
  --tw-shadow: 0 4px 16px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover{
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:\[scrollbar-width\:thin\]:hover{
  scrollbar-width: thin;
}
.focus\:border-\[var\(--acc\)\]:focus{
  border-color: var(--acc);
}
.focus\:border-acc:focus{
  border-color: var(--acc);
}
.focus\:opacity-100:focus{
  opacity: 1;
}
.focus\:shadow-\[0_0_0_2px_var\(--accdim\)\]:focus{
  --tw-shadow: 0 0 0 2px var(--accdim);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.active\:scale-\[\.97\]:active{
  --tw-scale-x: .97;
  --tw-scale-y: .97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.96\]:active{
  --tw-scale-x: 0.96;
  --tw-scale-y: 0.96;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:cursor-default:disabled{
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled{
  cursor: wait;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group\/sub:hover .group-hover\/sub\:block{
  display: block;
}
.group:hover .group-hover\:bg-acc{
  background-color: var(--acc);
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-30{
  opacity: 0.3;
}
.group:hover .group-hover\:opacity-50{
  opacity: 0.5;
}
@media (min-width: 768px){
  .md\:block{
    display: block;
  }
  .md\:grid-cols-\[1\.05fr_1\.4fr_1fr\]{
    grid-template-columns: 1.05fr 1.4fr 1fr;
  }
  .md\:grid-cols-\[1fr_auto_1fr\]{
    grid-template-columns: 1fr auto 1fr;
  }
  .md\:border-r{
    border-right-width: 1px;
  }
}
.dark\:border-rose-800:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-border-opacity: 1;
  border-color: rgb(159 18 57 / var(--tw-border-opacity, 1));
}
.dark\:bg-rose-900\/30:where([data-theme="dark"], [data-theme="dark"] *){
  background-color: rgb(136 19 55 / 0.3);
}
.dark\:bg-yellow-500\/20:where([data-theme="dark"], [data-theme="dark"] *){
  background-color: rgb(234 179 8 / 0.2);
}
.dark\:bg-yellow-500\/25:where([data-theme="dark"], [data-theme="dark"] *){
  background-color: rgb(234 179 8 / 0.25);
}
.dark\:text-emerald-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-300:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:text-sky-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.dark\:text-violet-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-400:where([data-theme="dark"], [data-theme="dark"] *){
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.\[\&\.dragging\]\:cursor-grabbing.dragging{
  cursor: grabbing;
}
.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-\[3px\]::-webkit-scrollbar-thumb{
  border-radius: 3px;
}
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-t4::-webkit-scrollbar-thumb{
  background-color: var(--t4);
}
.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track{
  background-color: transparent;
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{
  display: none;
}
.\[\&\:\:-webkit-scrollbar\]\:w-0::-webkit-scrollbar{
  width: 0px;
}
.\[\&\:hover\:\:-webkit-scrollbar\]\:w-1\.5:hover::-webkit-scrollbar{
  width: 0.375rem;
}
.\[\&\>svg\]\:block>svg{
  display: block;
}
.\[\&\>svg\]\:shrink-0>svg{
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-t2>svg{
  color: var(--t2);
}
.\[\&_\.ProseMirror\]\:min-h-\[60vh\] .ProseMirror{
  min-height: 60vh;
}
.\[\&_\.ProseMirror\]\:outline-none .ProseMirror{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\.ProseMirror_\.column-resize-handle\:hover\]\:bg-acc .ProseMirror .column-resize-handle:hover{
  background-color: var(--acc);
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:absolute .ProseMirror .column-resize-handle{
  position: absolute;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:bottom-0 .ProseMirror .column-resize-handle{
  bottom: 0px;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:right-\[-2px\] .ProseMirror .column-resize-handle{
  right: -2px;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:top-0 .ProseMirror .column-resize-handle{
  top: 0px;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:z-10 .ProseMirror .column-resize-handle{
  z-index: 10;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:w-1 .ProseMirror .column-resize-handle{
  width: 0.25rem;
}
.\[\&_\.ProseMirror_\.column-resize-handle\]\:cursor-col-resize .ProseMirror .column-resize-handle{
  cursor: col-resize;
}
.\[\&_\.ProseMirror_\.column-resize\]\:cursor-col-resize .ProseMirror .column-resize{
  cursor: col-resize;
}
.\[\&_\.ProseMirror_\.selectedCell\]\:bg-accdim .ProseMirror .selectedCell{
  background-color: var(--accdim);
}
.\[\&_\.ProseMirror_a\]\:text-acc .ProseMirror a{
  color: var(--acc);
}
.\[\&_\.ProseMirror_a\]\:underline .ProseMirror a{
  text-decoration-line: underline;
}
.\[\&_\.ProseMirror_blockquote\]\:border-l-2 .ProseMirror blockquote{
  border-left-width: 2px;
}
.\[\&_\.ProseMirror_blockquote\]\:border-brd .ProseMirror blockquote{
  border-color: var(--brd);
}
.\[\&_\.ProseMirror_blockquote\]\:pl-4 .ProseMirror blockquote{
  padding-left: 1rem;
}
.\[\&_\.ProseMirror_blockquote\]\:text-t3 .ProseMirror blockquote{
  color: var(--t3);
}
.\[\&_\.ProseMirror_code\]\:rounded .ProseMirror code{
  border-radius: 0.25rem;
}
.\[\&_\.ProseMirror_code\]\:bg-surf2 .ProseMirror code{
  background-color: var(--surf2);
}
.\[\&_\.ProseMirror_code\]\:px-1 .ProseMirror code{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.\[\&_\.ProseMirror_h1\]\:my-3 .ProseMirror h1{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.\[\&_\.ProseMirror_h1\]\:text-2xl .ProseMirror h1{
  font-size: 1.5rem;
  line-height: 2rem;
}
.\[\&_\.ProseMirror_h1\]\:font-bold .ProseMirror h1{
  font-weight: 700;
}
.\[\&_\.ProseMirror_h2\]\:my-3 .ProseMirror h2{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.\[\&_\.ProseMirror_h2\]\:text-xl .ProseMirror h2{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.\[\&_\.ProseMirror_h2\]\:font-semibold .ProseMirror h2{
  font-weight: 600;
}
.\[\&_\.ProseMirror_h3\]\:my-2 .ProseMirror h3{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.\[\&_\.ProseMirror_h3\]\:text-lg .ProseMirror h3{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.\[\&_\.ProseMirror_h3\]\:font-semibold .ProseMirror h3{
  font-weight: 600;
}
.\[\&_\.ProseMirror_hr\]\:border-brd .ProseMirror hr{
  border-color: var(--brd);
}
.\[\&_\.ProseMirror_img\]\:h-auto .ProseMirror img{
  height: auto;
}
.\[\&_\.ProseMirror_img\]\:max-w-full .ProseMirror img{
  max-width: 100%;
}
.\[\&_\.ProseMirror_ol\]\:list-decimal .ProseMirror ol{
  list-style-type: decimal;
}
.\[\&_\.ProseMirror_ol\]\:pl-6 .ProseMirror ol{
  padding-left: 1.5rem;
}
.\[\&_\.ProseMirror_p\]\:my-2 .ProseMirror p{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.\[\&_\.ProseMirror_pre\]\:rounded .ProseMirror pre{
  border-radius: 0.25rem;
}
.\[\&_\.ProseMirror_pre\]\:bg-surf2 .ProseMirror pre{
  background-color: var(--surf2);
}
.\[\&_\.ProseMirror_pre\]\:p-3 .ProseMirror pre{
  padding: 0.75rem;
}
.\[\&_\.ProseMirror_selectednode\]\:ring-2 .ProseMirror selectednode{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.\[\&_\.ProseMirror_selectednode\]\:ring-acc .ProseMirror selectednode{
  --tw-ring-color: var(--acc);
}
.\[\&_\.ProseMirror_table\]\:w-full .ProseMirror table{
  width: 100%;
}
.\[\&_\.ProseMirror_table\]\:border-collapse .ProseMirror table{
  border-collapse: collapse;
}
.\[\&_\.ProseMirror_td\]\:relative .ProseMirror td{
  position: relative;
}
.\[\&_\.ProseMirror_td\]\:border .ProseMirror td{
  border-width: 1px;
}
.\[\&_\.ProseMirror_td\]\:border-brd2 .ProseMirror td{
  border-color: var(--brd2);
}
.\[\&_\.ProseMirror_td\]\:px-2 .ProseMirror td{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\.ProseMirror_td\]\:py-1 .ProseMirror td{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.\[\&_\.ProseMirror_th\]\:relative .ProseMirror th{
  position: relative;
}
.\[\&_\.ProseMirror_th\]\:border .ProseMirror th{
  border-width: 1px;
}
.\[\&_\.ProseMirror_th\]\:border-brd2 .ProseMirror th{
  border-color: var(--brd2);
}
.\[\&_\.ProseMirror_th\]\:bg-surf2 .ProseMirror th{
  background-color: var(--surf2);
}
.\[\&_\.ProseMirror_th\]\:px-2 .ProseMirror th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\.ProseMirror_th\]\:py-1 .ProseMirror th{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.\[\&_\.ProseMirror_th\]\:text-left .ProseMirror th{
  text-align: left;
}
.\[\&_\.ProseMirror_th\]\:font-semibold .ProseMirror th{
  font-weight: 600;
}
.\[\&_\.ProseMirror_ul\[data-type\=taskList\]\]\:list-none .ProseMirror ul[data-type=taskList]{
  list-style-type: none;
}
.\[\&_\.ProseMirror_ul\[data-type\=taskList\]\]\:pl-0 .ProseMirror ul[data-type=taskList]{
  padding-left: 0px;
}
.\[\&_\.ProseMirror_ul\]\:list-disc .ProseMirror ul{
  list-style-type: disc;
}
.\[\&_\.ProseMirror_ul\]\:pl-6 .ProseMirror ul{
  padding-left: 1.5rem;
}
.\[\&_\.excalidraw\]\:h-full .excalidraw{
  height: 100%;
}
.\[\&_\.excalidraw\]\:w-full .excalidraw{
  width: 100%;
}
.\[\&_\.excalidraw\]\:min-w-\[1000px\] .excalidraw{
  min-width: 1000px;
}
.\[\&_svg\]\:h-auto svg{
  height: auto;
}
.\[\&_svg\]\:max-w-full svg{
  max-width: 100%;
}
/* ── Desktop Pet Mode ──
 * Mascot = ink-drop body + quill-pen tip. The pet window is a transparent,
 * always-on-top, skipTaskbar Tauri window (label `pet`) that mounts only the
 * `PetApp` component via the `#/pet` hash route (see main.tsx).
 *
 * States (D4): idle / hover / drag / click. State transitions are driven by
 * mouse events on the sprite; motion is CSS keyframes.
 */

/* The pet window shares `index.css` with the main editor, which sets
 * `html, body { background: var(--bg) }` — an opaque theme color. That would
 * show as a 120x120 light-gray square behind the transparent mascot, breaking
 * R1 (transparent) and R6 (click-through on transparent regions). main.tsx
 * adds `.is-pet-window` to <html> for the pet route only, so this override
 * leaves the main editor window's theming untouched. `--acc` stays available
 * so the mascot's `var(--acc, #3a6ef0)` fallback still resolves.
 *
 * The override covers `html`, `body`, AND `#root` (the React mount point):
 * `#root` itself has no background rule in `index.css`, but the webview's
 * default root-paint can still surface an opaque layer behind the SVG, and
 * any future rule targeting `#root` would re-introduce the square. Tagging
 * it here makes transparency bulletproof. `.pet-root` is also pinned
 * transparent even though its own rule below already sets it — the `!important`
 * here defends against a higher-specificity override. */
html.is-pet-window,
html.is-pet-window body,
html.is-pet-window #root {
  background: transparent !important;
}
html.is-pet-window .pet-root {
  background: transparent !important;
}

/* The pet-bubble window is also transparent (the speech-bubble card floats
 * above the desktop). Same opaque-square defense as the pet window: tag
 * <html> with `.is-pet-bubble-window` (see main.tsx) so the editor's
 * `html, body { background: var(--bg) }` rule does not paint an opaque
 * 320x120 square behind the card. The card itself sets its own bg below. */
html.is-pet-bubble-window,
html.is-pet-bubble-window body,
html.is-pet-bubble-window #root {
  background: transparent !important;
}

/* The voice-orb window is also transparent (the SiriGL WebGL waveform floats
 * above the desktop while the global voice hotkey is recording). Same opaque-
 * square defense: tag <html> with `.is-voice-orb-window` (see main.tsx) so
 * the editor's `html, body { background: var(--bg) }` rule does not paint an
 * opaque 460x180 square behind the canvas. The canvas itself outputs alpha
 * (the shader's alpha = max(R,G,B)), so the desktop shows through the
 * transparent regions. */
html.is-voice-orb-window,
html.is-voice-orb-window body,
html.is-voice-orb-window #root {
  background: transparent !important;
}

/* The pet-corner window is transparent (the corner toast stack floats above
 * the desktop). Same opaque-square defense as the bubble: tag <html> with
 * `.is-pet-corner-window` (see main.tsx) so the editor's
 * `html, body { background: var(--bg) }` rule does not paint an opaque
 * square behind the stack. The cards themselves set their own bg below. */
html.is-pet-corner-window,
html.is-pet-corner-window body,
html.is-pet-corner-window #root {
  background: transparent !important;
}

/* The pet-menu window is transparent (the right-click HTML menu floats above
 * the desktop beside the pet). Same opaque-square defense as the bubble: tag
 * <html> with `.is-pet-menu-window` (see main.tsx) so the editor's
 * `html, body { background: var(--bg) }` rule does not paint an opaque square
 * behind the menu. The menu card itself sets its own bg below. */
html.is-pet-menu-window,
html.is-pet-menu-window body,
html.is-pet-menu-window #root {
  background: transparent !important;
}

.pet-root {
  /* The pet window is 96x96 physical px. The root fills it so the sprite
   * can be centered, and transparent regions pass clicks through to the
   * desktop via setIgnoreCursorEvents toggling (see PetApp.tsx). */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  /* `visible` (not `hidden`) so the state-animation scale overflow is not
   * clipped by the root container. The OS window still clips at 96px, but
   * the mascot is shrunk to 72px (see `.pet-mascot`) so the scale fits
   * inside with margin. */
  overflow: visible;
}

.pet-sprite-layer {
  /* The sprite layer hosts the 72px mascot SVG inside the 96x96 pet window.
   * Without centering, the inline-element mascot sits at the layer's
   * top-left (0,0), so the circle's top would land on the window's top
   * edge. Centering the mascot gives ~12px margin on all sides → the
   * idle translate (1px) and scale-breathe (1.04 → +~1.5px each side)
   * stay well inside the window, no clip. The inline style in
   * PetApp.tsx (position/left/top/width/height/cursor) is unaffected. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pet-mascot {
  /* 72px in the 96×96 pet window. At 72px, click scale 1.08 → ~78px and
   * the scale-breathe peak (1.04 → ~75px) both fit inside the 96px
   * window with margin. MUST stay in sync with `PET_MASCOT_SIZE` in
   * `petPosition.ts` and the SVG `width`/`height` attributes in
   * `PetMascot.tsx`. */
  width: 72px;
  height: 72px;
  /* `overflow: visible` so the circle (r=244 inside the 512 viewBox, with
   * 12px margin) is not clipped by the SVG root if a state-animation
   * scale pushes it past the viewBox edge. The `<svg>` element also sets
   * `overflow="visible"` as an attribute; both belt-and-suspenders. */
  overflow: visible;
  cursor: pointer;
  transform-origin: center;
  will-change: transform;
  color: var(--acc, #3a6ef0);
  transition: transform 0.15s ease;
}

/* Custom `<img>` mascot (PRD Q3): keep the CSS transform animations on the
 * `<img>` so the breathing / hover / drag / click "alive" feel is preserved
 * regardless of source image. `object-fit: contain` prevents non-square
 * images from stretching; `user-select: none` + `-webkit-user-drag: none`
 * prevent the browser from initiating a native image drag (the pet window
 * owns drag via `startDragging`). `display: block` removes the inline-image
 * baseline gap so the image centers exactly like the inline SVG. */
.pet-mascot.is-img {
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.pet-mascot:hover { transform: scale(1.04); }
.pet-mascot:active { cursor: pointer; }

/* ── Breathing-light (icon self-pulse, no surrounding glow) ──
 * The breathing uses the independent CSS `scale` property (not
 * `transform: scale(...)`), so it composes with the state keyframes
 * below which own `transform` (translateY / rotate / scale). `scale`
 * and `transform` are separate CSS properties and multiply together —
 * the breathe owns `scale`, the state keyframes own `transform`, no
 * conflict. (Replacing the prior `filter: drop-shadow(...)` white halo
 * per user request — the user wanted only the icon self-pulse, no
 * surrounding glow.)
 *
 * Amplitude 1.0 ↔ 1.04, 2.4s cycle, ease-in-out. The 4% delta is small
 * enough to read as a calm breath but large enough to be visible at the
 * 88px mascot size even on a busy wallpaper. macOS may throttle CSS
 * animations on a `focus:false` window when the owning app is not
 * frontmost, so the amplitude is set high enough to be unmissable when
 * the webview is active. */
@keyframes pet-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}

/* ── State: idle (floating + breathing) ──
 * The idle state owns the most visible breathing so the pet pulses
 * clearly even with no mouse interaction. The state keyframe
 * (`pet-idle`) nudges `transform` by 2px (not 1px) so there is BOTH a
 * scale pulse AND a visible float at idle — the previous 1px nudge was
 * too subtle to read as motion. Both run in parallel via the
 * comma-separated `animation` list (pet-idle owns `transform`,
 * pet-breathe owns `scale`). */
.pet-mascot.is-idle {
  animation: pet-idle 3.2s ease-in-out infinite,
             pet-breathe 2.4s ease-in-out infinite;
}
@keyframes pet-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── State: hover (looks up / reacts) ── */
.pet-mascot.is-hover {
  animation: pet-hover 1.6s ease-in-out infinite,
             pet-breathe 2.4s ease-in-out infinite;
}
@keyframes pet-hover {
  0%, 100% { transform: translateY(-2px) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}

/* ── State: drag (wobble while being dragged) ── */
.pet-mascot.is-drag {
  animation: pet-drag 0.5s ease-in-out infinite,
             pet-breathe 2.4s ease-in-out infinite;
  cursor: pointer;
}
@keyframes pet-drag {
  0%, 100% { transform: rotate(-4deg) scale(1.02); }
  25%      { transform: rotate(3deg) scale(0.98); }
  50%      { transform: rotate(-2deg) scale(1.03); }
  75%      { transform: rotate(4deg) scale(0.99); }
}

/* ── State: click (squish/pop feedback) ── */
.pet-mascot.is-click {
  animation: pet-click 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) 1,
             pet-breathe 2.4s ease-in-out infinite;
}
@keyframes pet-click {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.08, 0.92); }
  70%  { transform: scale(0.96, 1.04); }
  100% { transform: scale(1, 1); }
}

/* ── Context menu ──
 * The right-click quick-action menu is rendered as a *native* OS popup
 * (built Rust-side via `pet_show_context_menu`), not as HTML — the pet
 * window is only 120x120, so an HTML `position: fixed` menu would be
 * clipped by the window bounds (issue #1). See PetContextMenu.tsx. */

/* ── Pet quick-action panel window (`pet-panel`) ──
 * The panel reuses `index.css` but the WINDOW is transparent (declared
 * `transparent:true` + `pet_make_transparent` on mount) so the rounded
 * `.pet-panel-root` (10px radius) shows clean corners. The html/body MUST
 * stay transparent — an opaque body bg painted the editor gray into the
 * corner slivers outside the root's radius, reading as a gray square behind
 * the rounded popup. main.tsx tags <html> with `.is-pet-panel-window` for
 * the `/#/pet-panel` route only. PR1 ships a minimal shell; PR2 mounts the
 * launcher grid, PR3 the embedded chat. */
html.is-pet-panel-window,
html.is-pet-panel-window body {
  /* Transparent so the rounded root floats over the desktop — the root's
   * own `background: var(--panel)` still provides the opaque card. */
  background: transparent;
}

.pet-panel-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel, #ffffff);
  color: var(--t1, #1f2330);
  border-radius: 10px;
  overflow: hidden;
  /* ponytail: panel-root no longer sets user-select — message body must be
     selectable so users can copy chat text; the header stays non-select
     because it's a drag handle. The old blanket `user-select: none` here
     was historical (inherited from the transparent pet window's no-interact
     assumption) and silently broke text selection in the chat body. */
  font-family: var(--ui-font, system-ui, sans-serif);
  font-size: 14px;
  /* ponytail: fade-in on every show. The webview persists across shows,
     so the animation must be class-driven (toggled by the
     `pet://panel-fade-in` event listener in PetPanelApp) instead of a
     mount-only @keyframes. Start at 0 so the window-appears-at-wrong-frame
     flash + first-paint flash are both masked by the 0→1 transition.
     Softer entrance: scale(0.98) from center (was 0.96 from top-left) —
     the bigger scale + top-left origin amplified the mid-fade frame shift. */
  opacity: 0;
  transform: scale(0.98);
  transform-origin: center;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.pet-panel-root.is-visible {
  opacity: 1;
  transform: scale(1);
}

.pet-panel-header {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-bottom: 1px solid var(--brd, #e2e5ee);
  background: var(--panel, #ffffff);
  flex-shrink: 0;
  /* The header is a drag handle (PetPanelApp.tsx onPointerDown →
   * startDragging). The grab cursor signals draggability; buttons inside
   * (close) keep their own cursor via stopPropagation. */
  cursor: grab;
  /* ponytail: drag handle must stay non-select so dragging doesn't select
     the header text; message body (`.pet-panel-body`) is explicitly
     selectable to allow copy. */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.pet-panel-header:active {
  cursor: grabbing;
}

/* Search row above the tabs — input + clear button. The row itself is a
 * drag-handle child (suppressDrag stops the input from starting a drag). */
.pet-panel-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 0;
}
.pet-panel-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.pet-panel-search-input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: var(--surf, #f8f9fd);
  color: var(--t1, #1f2330);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.pet-panel-search-input::-moz-placeholder {
  color: var(--t3, #9aa1b2);
}
.pet-panel-search-input::placeholder {
  color: var(--t3, #9aa1b2);
}
.pet-panel-search-input:focus {
  background: var(--panel, #ffffff);
  box-shadow: 0 0 0 2px var(--accglow, rgba(58, 110, 240, 0.12));
}

/* Tabs + close row (kept as its own row so the search row can sit above). */
.pet-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
}

.pet-panel-tabs {
  /* Tabs live inside the header (left of the close button); the header
   * provides padding, background, and the bottom border, so the nav itself
   * is just a flex row for the tab buttons. */
  display: flex;
  align-items: stretch;
  gap: 0;
}

.pet-panel-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: var(--t2, #5a6275);
  font-size: 20px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.pet-panel-close:hover {
  background: var(--hov, #eef0f5);
  color: var(--t1, #1f2330);
}

.pet-panel-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--t2, #5a6275);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.pet-panel-tab:hover {
  color: var(--t1, #1f2330);
  background: var(--hov, #eef0f5);
}
.pet-panel-tab.is-active {
  color: var(--acc, #3a6ef0);
  border-bottom-color: var(--acc, #3a6ef0);
}

/* Unified search results (files / commands / plugins). */
.pet-panel-search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Keep the 12px top spacing the body padding used to provide (body's top
     padding was removed so the chat header can sit flush under the tabs). */
  padding-top: 12px;
}
.pet-panel-search-group {
  display: flex;
  flex-direction: column;
}
.pet-panel-search-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3, #9aa1b2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px 4px;
}
.pet-panel-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.pet-panel-search-item:hover {
  background: var(--hov, #eef0f5);
}
.pet-panel-search-item.is-active {
  /* Keyboard selection (ArrowUp/ArrowDown): slightly deeper than hover so
   * the highlighted row stays visible even when the mouse hovers another. */
  background: var(--act, #e3e8f5);
}
.pet-panel-search-item-title {
  color: var(--t1, #1f2330);
}
.pet-panel-search-item-sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--t3, #9aa1b2);
}
.pet-panel-search-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--t3, #9aa1b2);
  font-size: 12px;
}

.pet-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* No top padding: the embedded AiPanel chat header starts flush under the
     tabs border so its session dropdown / + / delete icons sit vertically
     centered between the two header lines (tabs border above, AiPanel header
     border below). Search results + Inbox keep their own top spacing. */
  padding: 0 12px 12px;
  gap: 10px;
  overflow: auto;
  min-height: 0;
  /* ponytail: chat message content must be selectable so users can copy
     assistant/user text. Header stays non-select (drag handle) via its own
     rule; root no longer sets user-select. */
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
}

.pet-panel-placeholder {
  color: var(--t3, #8a92a3);
  font-size: 13px;
}

/* ── Inbox tab ──
 * Scrollable list of received-notification snapshots. Each row is a button
 * that re-fires the original payload's jump. Toolbar holds a count + Clear. */
.pet-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  padding-top: 12px;
}
.pet-inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--t2, #5a6275);
}
.pet-inbox-clear {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid var(--brd, #e2e5ee);
  border-radius: 6px;
  color: var(--t2, #5a6275);
  font-family: inherit;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pet-inbox-clear:hover {
  background: var(--hov, #eef0f5);
  color: var(--t1, #1f2330);
}
.pet-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}
.pet-inbox-row {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--brd, #e2e5ee);
  border-radius: 8px;
  background: var(--panel, #ffffff);
  color: var(--t1, #1f2330);
  font-family: inherit;
  font-size: 12px;
  cursor: default;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pet-inbox-row.is-clickable {
  cursor: pointer;
}
.pet-inbox-row.is-clickable:hover {
  background: var(--hov, #eef0f5);
  border-color: var(--acc, #3a6ef0);
}
.pet-inbox-row:disabled {
  cursor: default;
  color: var(--t2, #5a6275);
}
.pet-inbox-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.pet-inbox-title {
  flex: 1;
  font-weight: 600;
  color: var(--t1, #1f2330);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-inbox-time {
  color: var(--t3, #8a92a3);
  font-size: 10px;
  white-space: nowrap;
}
.pet-inbox-kind {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--hov, #eef0f5);
  color: var(--t2, #5a6275);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pet-inbox-text {
  color: var(--t2, #5a6275);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pet-inbox-empty {
  color: var(--t3, #8a92a3);
  font-size: 13px;
  padding: 36px 0 24px;
  text-align: center;
}

/* ── Launcher grid (PR2) ──
 * 8 buttons in a 2-column × 4-row grid. Each button is a vertical stack of
 * icon + label. Fits the 600×840 panel with room below for the chat slot. */
.pet-launcher {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.pet-launcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pet-launcher-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--brd, #e2e5ee);
  border-radius: 8px;
  background: var(--panel, #ffffff);
  color: var(--t1, #1f2330);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pet-launcher-btn:hover {
  background: var(--hov, #eef0f5);
  border-color: var(--acc, #3a6ef0);
  color: var(--acc, #3a6ef0);
}
.pet-launcher-btn:active {
  transform: translateY(1px);
}
.pet-launcher-btn.is-active {
  background: var(--accdim, #e7eefd);
  border-color: var(--acc, #3a6ef0);
  color: var(--acc, #3a6ef0);
}

.pet-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: inherit;
}

.pet-launcher-label {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

/* ── Inline Clip-from-URL form (PR2, PRD R5) ── */
.pet-clip-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--brd, #e2e5ee);
  border-radius: 8px;
  background: var(--bg, #f0f2f8);
}

.pet-clip-form-row {
  display: flex;
  gap: 6px;
}

.pet-clip-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--brd, #e2e5ee);
  border-radius: 6px;
  background: var(--panel, #ffffff);
  color: var(--t1, #1f2330);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.pet-clip-input:focus {
  border-color: var(--acc, #3a6ef0);
}
.pet-clip-input:disabled {
  opacity: 0.6;
}

.pet-clip-submit {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 6px 10px;
  border: 1px solid var(--acc, #3a6ef0);
  border-radius: 6px;
  background: var(--acc, #3a6ef0);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.pet-clip-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.pet-clip-status {
  font-size: 11px;
  line-height: 1.3;
  padding: 2px 4px;
  word-break: break-all;
}
.pet-clip-status-running { color: var(--t2, #5a6275); }
.pet-clip-status-success { color: var(--acc, #3a6ef0); }
.pet-clip-status-error { color: #d33; }

.pet-clip-form-footer {
  display: flex;
  justify-content: flex-end;
}

.pet-clip-cancel {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: var(--t3, #8a92a3);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.pet-clip-cancel:hover {
  color: var(--t1, #1f2330);
  background: var(--hov, #eef0f5);
}
.pet-clip-cancel:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Embedded AI chat (PR3, PRD R6/R7) ──
 * Vault-free mini chat in the pet-panel. Self-hosted CliAdapter (no
 * aiStore), messages persisted in `pet-chat:messages` namespace.
 *
 * PR3: the chat UI (message list, bubbles, copy button, input box, clear
 * button, empty-state hint, unconfigured-CTA) is now rendered by the
 * shared `components/chat/*` components, which style themselves with
 * Tailwind tokens. All `.pet-chat-*` BEM rules were deleted from this
 * file; only the `.pet-panel-*` window-chrome rules above remain. */

/* ── Pet bubble notification window (`pet-bubble`) ──
 * A transparent NSPanel window (320x120) that pops a speech-bubble card
 * above the pet on `pet://bubble-show`. The card fills the window (minus a
 * 6px margin) so the only transparent, click-eating area is the 4 rounded
 * corner slivers for the bubble's 6s lifetime — see PetBubbleApp.tsx for
 * why we do NOT toggle `setIgnoreCursorEvents` on this static window.
 * `shadow:true` in tauri.conf.json draws the native drop shadow. */
.pet-bubble-root {
  position: fixed;
  inset: 0;
  display: flex;
  padding: 6px;
  box-sizing: border-box;
  font-family: var(--ui-font, system-ui, sans-serif);
  font-size: 13px;
  color: var(--t1, #1f2330);
  /* The card carries its own bg; the root is fully transparent so the
   * window's transparent surface shows the desktop behind the corner slivers. */
  background: transparent;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

.pet-bubble-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 10px 12px;
  background: var(--panel, #ffffff);
  border-radius: 10px;
  /* Left accent bar tints by kind (overridden per `--kind` below). */
  box-shadow: inset 3px 0 0 0 var(--bubble-accent, #3a6ef0);
  overflow: hidden;
}

.pet-bubble--info { --bubble-accent: #3a6ef0; }
.pet-bubble--reminder { --bubble-accent: #f0a03a; }
.pet-bubble--message { --bubble-accent: #2faa6a; }
.pet-bubble--event { --bubble-accent: #9b6ef0; }

.pet-bubble-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--t3, #8a8f9c);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-bubble-close:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
  color: var(--t1, #1f2330);
}

.pet-bubble-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--t1, #1f2330);
  padding-right: 20px; /* clear the ✕ */
}
.pet-bubble-title--link {
  cursor: pointer;
  color: var(--acc, #3a6ef0);
}
.pet-bubble-title--link:hover {
  text-decoration: underline;
}

.pet-bubble-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--t2, #4a4f5c);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pet-bubble-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.pet-bubble-btn {
  border: none;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.pet-bubble-btn--primary {
  background: var(--acc, #3a6ef0);
  color: #fff;
}
.pet-bubble-btn--primary:hover {
  filter: brightness(1.08);
}
.pet-bubble-btn--ghost {
  background: transparent;
  color: var(--t2, #4a4f5c);
}
.pet-bubble-btn--ghost:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
}

/* Authorize card overrides — the default bubble styles are sized for 320×120;
 * inside the Cloudia 378×224 window they leave too much whitespace with tiny
 * fonts. Scale padding/fonts/radii up for the authorize prompt. */
.pet-bubble-authorize {
  padding: 22px 24px 20px;
  gap: 12px;
  justify-content: center;
  border-radius: 22px;
  box-shadow: inset 4px 0 0 0 var(--bubble-accent, #3a6ef0);
}
.pet-bubble-authorize .pet-bubble-close {
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  border-radius: 50%;
}
.pet-bubble-authorize .pet-bubble-title {
  font-size: 18px;
  padding-right: 28px;
}
.pet-bubble-authorize .pet-bubble-text {
  font-size: 14px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}
.pet-bubble-authorize .pet-bubble-actions {
  justify-content: center;
  gap: 10px;
}
.pet-bubble-authorize .pet-bubble-btn {
  padding: 9px 18px;
  font-size: 14px;
  border-radius: 9999px;
}

/* ─── Pet corner toast stack (`pet-corner` window) ──────────────────────────
 * Compact stacked cards at a screen corner. 320×80 logical per card; gap
 * 8px. Newest on top (first child = newest in the DOM order the component
 * renders). Cards reuse the bubble's kind accent palette for visual
 * consistency. */

.pet-corner-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* `bottom` intentionally unset: root height follows content so the
   * window can be sized to the actual stack height (measured via
   * ResizeObserver in PetCornerApp). With `bottom: 0` the root would
   * stretch to fill the window and `scrollHeight` would mirror the
   * window, not the content. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0; /* the corner math already includes the margin; the root is
               * transparent so its padding would just offset cards inward. */
  box-sizing: border-box;
  font-family: var(--ui-font, system-ui, sans-serif);
  font-size: 13px;
  color: var(--t1, #1f2330);
  background: transparent;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  /* Stack grows from the top of the window downward. For bottom-anchored
   * corners, the window is positioned so its bottom edge sits margin above
   * the work-area bottom — the stack still renders top-down inside it. */
}

.pet-corner-card {
  position: relative;
  flex-shrink: 0;
  width: 320px;
  min-height: 48px;
  /* `height: auto` — card grows to fit title + 2-line text + actions.
   * Text is capped at 2 lines via -webkit-line-clamp so the natural
   * height is bounded (~74px max). The window is resized to the actual
   * stack height after measure (PetCornerApp's ResizeObserver). */
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 6px 12px;
  background: var(--panel, #ffffff);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 0 var(--bubble-accent, #3a6ef0),
              0 2px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  cursor: pointer; /* card body click → navigate */
}

.pet-corner--info { --bubble-accent: #3a6ef0; }
.pet-corner--reminder { --bubble-accent: #f0a03a; }
.pet-corner--message { --bubble-accent: #2faa6a; }
.pet-corner--event { --bubble-accent: #9b6ef0; }

.pet-corner-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--t3, #8a8f9c);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pet-corner-close:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
  color: var(--t1, #1f2330);
}

.pet-corner-title {
  font-weight: 600;
  font-size: 11px;
  color: var(--t1, #1f2330);
  padding-right: 18px; /* clear the ✕ */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-corner-text {
  flex: 1;
  font-size: 11px;
  line-height: 1.25;
  color: var(--t2, #4a4f5c);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-right: 10px; /* clear the ✕ when no title above */
}

.pet-corner-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.pet-corner-btn {
  border: none;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.pet-corner-btn--primary {
  background: var(--acc, #3a6ef0);
  color: #fff;
}
.pet-corner-btn--primary:hover {
  filter: brightness(1.08);
}
.pet-corner-btn--ghost {
  background: transparent;
  color: var(--t2, #4a4f5c);
}
.pet-corner-btn--ghost:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
}

/* ────────────────────────────────────────────────────────────────────────────
 * Pet right-click HTML menu (`pet-menu` window).
 *
 * A transparent borderless NSPanel window (converted from the Tauri window by
 * `pet_panel_macos::convert_windows`) that hosts the HTML right-click menu
 * replacing the native NSMenu. The window is sized at runtime by
 * `pet_menu_set_size` (the frontend measures the rendered `.pet-menu-root`
 * DOM and passes the physical px). The card itself sets its own bg + shadow;
 * the surrounding transparent window region passes clicks through to the
 * desktop (the OS window's `setIgnoreCursorEvents` is NOT toggled because
 * the visible card fills the window — same logic as the pet-bubble).
 * ──────────────────────────────────────────────────────────────────────────── */

/* Window-root wrapper: `inline-flex` so the wrapper SHRINKS-TO-FIT its content
 * (main card + in-flow submenu side by side). `getBoundingClientRect` on this
 * returns the union of the main card + submenu card, which `resizeAndReposition`
 * measures to size the OS window. A block-level `display: flex` fills its
 * parent's width (220px = the pet-menu window's content width), so the wrapper
 * box stayed at 220px even when the in-flow submenu overflowed it — the OS
 * window never grew and the submenu was clipped at the window's right edge. */
.pet-menu-window-root {
  display: inline-flex;
  align-items: flex-start;
}

.pet-menu-root {
  /* Card fills the main region; the OS window clips at the wrapper's
   * bounding box (main card + floating submenu when visible). The card
   * background is EXPLICIT white (not var(--bg)): the menu window loads the
   * app's index.css, whose `--bg` (#f0f2f8) is the editor's light gray-blue
   * — a card using var(--bg) reads as a gray "background panel" behind the
   * items instead of a native white menu. */
  box-sizing: border-box;
  min-width: 224px;
  padding: 5px;
  background: #ffffff;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  /* No box-shadow: the OS window is sized exactly to the card, so a shadow
   * is clipped in the main state — but when the submenu is open the window
   * grows to the card union and the shadow leaks into the 6px gap + the
   * strip below the main card, reading as a faint "background" behind the
   * popup. The border carries the edge definition instead. */
  color: var(--t1, #1f2329);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  font-size: 13px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  animation: pet-menu-fade 140ms ease-out;
}

.pet-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}
.pet-menu-item:hover {
  background: var(--accent, #597ef7);
  color: #fff;
}
.pet-menu-item:hover .pet-menu-radio,
.pet-menu-item:hover .pet-menu-check {
  border-color: #fff;
}

/* Parent item (size / opacity submenu toggler) — has a chevron on the right. */
.pet-menu-item--parent {
  justify-content: space-between;
}
.pet-menu-item--toggle {
  justify-content: space-between;
}
.pet-menu-chevron {
  /* Right-side submenu affordance (size / opacity items). The user found
   * the old 14px chevron too faint — keep it clearly larger + bolder. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  color: inherit;
  flex-shrink: 0;
}

/* Submenu card — in-flow flex sibling of the main card (margin-left for the
 * visual gap, margin-top set inline via `style.marginTop` to align with the
 * parent item). The previous `position: absolute; left: 100%; top: 0` left
 * the submenu out-of-flow so the wrapper's `getBoundingClientRect` did not
 * include it → the OS window never grew → the submenu was clipped at the
 * window's right edge. Items inside reuse `.pet-menu-item` + `--radio` +
 * `.pet-menu-radio` + `.is-checked` — no indent, base `7px 14px` padding. */
.pet-menu-submenu {
  margin-left: 6px;
  box-sizing: border-box;
  min-width: 128px;
  padding: 5px;
  background: #ffffff;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  color: var(--t1, #1f2329);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  font-size: 13px;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  animation: pet-menu-fade 140ms ease-out;
}

/* Leftward submenu (pet on the right half) — rendered before the main card
 * via `order: -1`, with the 6px gap on ITS right side so the wrapper's union
 * rect stays tight (the main card's on-screen position is pinned against
 * that union by `syncSubmenuWindow`). */
.pet-menu-submenu--left {
  order: -1;
  margin-left: 0;
  margin-right: 6px;
}

/* Radio item — leading circle indicator, fills when checked. */
.pet-menu-radio {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pet-menu-item--radio.is-checked .pet-menu-radio {
  background: currentColor;
}
.pet-menu-item--radio.is-checked {
  font-weight: 500;
}

/* Click-through toggle — trailing check mark (empty when off). */
.pet-menu-check {
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  font-size: 13px;
}
.pet-menu-item--toggle.is-checked {
  font-weight: 500;
}

.pet-menu-sep {
  height: 1px;
  margin: 4px 8px;
  background: var(--border, rgba(0, 0, 0, 0.08));
}

/* Entrance fade — opacity only (no transform), so the animated card never
 * shifts its measured rect mid-open/mid-hover. */
@keyframes pet-menu-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * Dark mode — the menu follows the APP theme, not just the OS. `useTheme()`
 * in `PetMenuApp` syncs `appearanceStore.theme` (hydrated in this separate
 * realm via `pet://settings-updated` + `settingsLoadDone`) onto this
 * window's `<html data-theme>`, so the dark palette below keys off
 * `[data-theme="dark"]`. The `prefers-color-scheme` block is a fallback for
 * the brief window before hydration applies `data-theme` — it deliberately
 * excludes `[data-theme="light"]` so an OS-dark + app-light setup stays
 * light. Colors mirror the app's dark palette (`index.css`).
 * ──────────────────────────────────────────────────────────────────────────── */
html.is-pet-menu-window[data-theme="dark"] .pet-menu-root,
html.is-pet-menu-window[data-theme="dark"] .pet-menu-submenu {
  --bg: #0f1219;
  --t1: #e2e8f8;
  --border: #1c2136;
  --accent: #5b8af5;
  --hover: rgba(255, 255, 255, 0.04);
}
html.is-pet-menu-window[data-theme="dark"] .pet-menu-root {
  background: var(--bg);
  border-color: var(--border);
  color: var(--t1);
}
html.is-pet-menu-window[data-theme="dark"] .pet-menu-submenu {
  background: var(--bg, #0f1219);
  border-color: var(--border, #1c2136);
  color: var(--t1, #e2e8f8);
}
html.is-pet-menu-window[data-theme="dark"] .pet-menu-sep {
  background: #1c2136;
}

@media (prefers-color-scheme: dark) {
  html.is-pet-menu-window:not([data-theme="light"]) .pet-menu-root,
  html.is-pet-menu-window:not([data-theme="light"]) .pet-menu-submenu {
    --bg: #0f1219;
    --t1: #e2e8f8;
    --border: #1c2136;
    --accent: #5b8af5;
    --hover: rgba(255, 255, 255, 0.04);
  }
  html.is-pet-menu-window:not([data-theme="light"]) .pet-menu-root {
    background: var(--bg);
    border-color: var(--border);
    color: var(--t1);
  }
  html.is-pet-menu-window:not([data-theme="light"]) .pet-menu-submenu {
    background: var(--bg, #0f1219);
    border-color: var(--border, #1c2136);
    color: var(--t1, #e2e8f8);
  }
  html.is-pet-menu-window:not([data-theme="light"]) .pet-menu-sep {
    background: #1c2136;
  }
}

mjx-container[jax="SVG"] {
  direction: ltr;
}

mjx-container[jax="SVG"] > svg {
  overflow: visible;
  min-height: 1px;
  min-width: 1px;
}

mjx-container[jax="SVG"] > svg a {
  fill: blue;
  stroke: blue;
}

mjx-container[jax="SVG"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

mjx-container[jax="SVG"][display="true"][width="full"] {
  display: flex;
}

mjx-container[jax="SVG"][justify="left"] {
  text-align: left;
}

mjx-container[jax="SVG"][justify="right"] {
  text-align: right;
}

g[data-mml-node="merror"] > g {
  fill: red;
  stroke: red;
}

g[data-mml-node="merror"] > rect[data-background] {
  fill: yellow;
  stroke: none;
}

g[data-mml-node="mtable"] > line[data-line], svg[data-table] > g > line[data-line] {
  stroke-width: 70px;
  fill: none;
}

g[data-mml-node="mtable"] > rect[data-frame], svg[data-table] > g > rect[data-frame] {
  stroke-width: 70px;
  fill: none;
}

g[data-mml-node="mtable"] > .mjx-dashed, svg[data-table] > g > .mjx-dashed {
  stroke-dasharray: 140;
}

g[data-mml-node="mtable"] > .mjx-dotted, svg[data-table] > g > .mjx-dotted {
  stroke-linecap: round;
  stroke-dasharray: 0,140;
}

g[data-mml-node="mtable"] > g > svg {
  overflow: visible;
}

[jax="SVG"] mjx-tool {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
}

[jax="SVG"] mjx-tool > mjx-tip {
  position: absolute;
  top: 0;
  left: 0;
}

mjx-tool > mjx-tip {
  display: inline-block;
  padding: .2em;
  border: 1px solid #888;
  font-size: 70%;
  background-color: #F8F8F8;
  color: black;
  box-shadow: 2px 2px 5px #AAAAAA;
}

g[data-mml-node="maction"][data-toggle] {
  cursor: pointer;
}

mjx-status {
  display: block;
  position: fixed;
  left: 1em;
  bottom: 1em;
  min-width: 25%;
  padding: .2em .4em;
  border: 1px solid #888;
  font-size: 90%;
  background-color: #F8F8F8;
  color: black;
}

foreignObject[data-mjx-xml] {
  font-family: initial;
  line-height: normal;
  overflow: visible;
}

mjx-container[jax="SVG"] path[data-c], mjx-container[jax="SVG"] use[data-c] {
  stroke-width: 3;
}
._wrapper_1ooyb_1 {
	position: fixed;
	inset: 0;
	z-index: 2147483641; /* 确保在所有元素之上，除了 panel */
	cursor: wait;
	overflow: hidden;

	display: none;
}

._wrapper_1ooyb_1._visible_1ooyb_11 {
	display: block;
}
/* AI 光标样式 */
._cursor_1dgwb_2 {
	position: absolute;
	width: var(--cursor-size, 75px);
	height: var(--cursor-size, 75px);
	pointer-events: none;
	z-index: 10000;
}

._cursorBorder_1dgwb_10 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
	mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;

	transform-origin: center;
	transform: rotate(-135deg) scale(1.2);
	margin-left: -10px;
	margin-top: -18px;
}

._cursorFilling_1dgwb_25 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e");
	background-size: 100% 100%;
	background-repeat: no-repeat;

	transform-origin: center;
	transform: rotate(-135deg) scale(1.2);
	margin-left: -10px;
	margin-top: -18px;
}

._cursorRipple_1dgwb_39 {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	margin-left: -50%;
	margin-top: -50%;

	&::after {
		content: '';
		opacity: 0;
		position: absolute;
		inset: 0;
		border: 4px solid rgba(57, 182, 255, 1);
		border-radius: 50%;
	}
}

._cursor_1dgwb_2._clicking_1dgwb_57 ._cursorRipple_1dgwb_39::after {
	animation: _cursor-ripple_1dgwb_1 300ms ease-out forwards;
}

@keyframes _cursor-ripple_1dgwb_1 {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}
}
/*$vite$:1*/<meta http-equiv="Content-Security-Policy" content="default-src &#39;self&#39;; script-src &#39;self&#39; &#39;unsafe-inline&#39; &#39;unsafe-eval&#39; &#39;wasm-unsafe-eval&#39; blob: quill-plugin: https://uicdn.toast.com https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; style-src &#39;self&#39; &#39;unsafe-inline&#39; https://uicdn.toast.com https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; font-src &#39;self&#39; data: https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; img-src &#39;self&#39; data: blob: asset: http://asset.localhost http://*.clouddn.com https://*.r2.dev https://*.aliyuncs.com https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; media-src &#39;self&#39; blob: asset: http://asset.localhost https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; connect-src &#39;self&#39; ipc: http://ipc.localhost quill-plugin: https://*.qiniup.com https://*.r2.cloudflarestorage.com https://*.aliyuncs.com http://localhost:1420 ws://localhost:1420 https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; worker-src &#39;self&#39; blob: https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*; frame-src &#39;self&#39; blob: data: quill-plugin: https://cdn.jsdelivr.net https://esm.sh https://embed.diagrams.net https://fonts.googleapis.com https://fonts.gstatic.com https://www.plantuml.com https://quickchart.io https://kroki.io http://127.0.0.1:*">

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #F6F8FB;
  color: #1a2040;
  -webkit-font-smoothing: antialiased;
}
.quill-shell { border: 1px solid var(--brd); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px -20px rgba(26,32,64,.18); transform: scale(.94); transform-origin: top left; width: calc(100% / .94); height: 680px; }
.quill-shell .shell { height: 680px; }
.quill-shell .sidebar { height: 100% !important; }