body {
  color: var(--affine-text-primary-color);
  font-family: var(--affine-font-family);
  font-size: var(--affine-font-base);
}
@keyframes q3n4i21 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.q3n4i22 {
  transform: rotate(-90deg);
}
.q3n4i23 {
  --q3n4i20: 1.5s;
  animation: q3n4i21 var(--q3n4i20) infinite linear;
}
.jd7s4b0 {
  display: inline-flex;
  height: 1em;
  width: 1em;
  align-items: center;
  justify-content: center;
}
.jd7s4b0 :is(path[fill="rgb(119,117,125)"],path[fill="rgb(122,122,122)"]) {
  fill: currentColor;
}
.jd7s4b0 :is(path[stroke="rgb(119,117,125)"],path[stroke="rgb(122,122,122)"]) {
  stroke: currentColor;
}
.jd7s4b0 :is(rect[fill="rgb(255,255,255)"],rect[fill="#ffffff"]) {
  fill: transparent;
}
.jd7s4b0 :is(path[fill="rgb(255,255,255)"],path[fill="#ffffff"]) {
  fill: transparent;
}
.jd7s4b0 :is(path[fill="rgb(245,245,245)"]) {
  fill: var(--affine-v2-layer-background-secondary);
}
@keyframes _18rpso40 {
  from {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: none;
  }
}
@keyframes _18rpso41 {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
  from {
    opacity: 1;
    transform: translateY(0);
  }
}
._18rpso42 {
  animation: _18rpso40 150ms cubic-bezier(0.42, 0, 0.58, 1);
}
._18rpso42[data-state="closed"] {
  pointer-events: none;
  animation: _18rpso41 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
._16dum7p3 {
  min-width: 180px;
  border-radius: 8px;
  padding: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 400;
  background-color: var(--affine-v2-layer-background-overlayPanel);
  box-shadow: var(--affine-menu-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-app-region: no-drag;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._16dum7p3.mobile {
  padding: 0;
  box-shadow: none;
}
._16dum7p4 {
  --_16dum7p0: var(--affine-v2-icon-primary);
  --_16dum7p1: var(--affine-v2-text-primary);
  --_16dum7p2: transparent;
  color: var(--_16dum7p1);
  background-color: var(--_16dum7p2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
  line-height: 22px;
  border: none;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
._16dum7p4.block {
  max-width: 100%;
}
._16dum7p4[data-disabled], ._16dum7p4.disabled {
  --_16dum7p0: var(--affine-v2-icon-disable);
  --_16dum7p1: var(--affine-v2-text-secondary);
  pointer-events: none;
  cursor: default;
}
._16dum7p4:hover {
  --_16dum7p2: var(--affine-hover-color);
  outline: none !important;
}
._16dum7p4:focus-visible {
  outline: 1px solid var(--affine-v2-layer-insideBorder-primaryBorder);
}
._16dum7p4.danger:hover {
  --_16dum7p0: var(--affine-error-color);
  --_16dum7p1: var(--affine-error-color);
  --_16dum7p2: var(--affine-background-error-color);
}
._16dum7p4.warning:hover {
  --_16dum7p0: var(--affine-warning-color);
  --_16dum7p1: var(--affine-warning-color);
  --_16dum7p2: var(--affine-background-warning-color);
}
._16dum7p4.checked, ._16dum7p4.selected {
  --_16dum7p0: var(--affine-primary-color);
}
._16dum7p5 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
._16dum7p6 {
  display: flex;
  flex-shrink: 0;
  font-size: var(--affine-font-h-5);
  color: var(--_16dum7p0);
  width: 20px;
  height: 20px;
}
._16dum7p7 {
  width: 100%;
  height: 8px;
  position: relative;
}
._16dum7p7:after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: var(--affine-v2-layer-insideBorder-border);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleY(0.5);
}
@keyframes zce91z5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes zce91z6 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes zce91z7 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes zce91z8 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes zce91z9 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes zce91za {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes zce91zb {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.zce91zf {
  position: fixed;
  inset: 0;
  background-color: var(--affine-background-modal-color);
  z-index: var(--affine-z-index-modal);
  animation: zce91z5 150ms forwards;
}
.zce91zf.anim-none {
  animation: none;
}
.zce91zf.mobile {
  background-color: var(--affine-v2-layer-background-mobile-modal);
}
.zce91zg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: var(--affine-z-index-modal);
  transition: padding-bottom 230ms ease-out;
}
.zce91zg[data-mobile] {
  align-items: flex-end;
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 20px));
}
.zce91zg[data-full-screen="true"] {
  align-items: flex-start;
  padding: 0 !important;
}
.zce91zg.anim-none {
  animation: none;
}
.zce91zg.anim-fadeScaleTop {
  animation: zce91z6 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
[data-zce91z4] .zce91zg.anim-fadeScaleTop.vt-active {
  view-transition-name: zce91zc;
}
.zce91zg.anim-slideBottom {
  animation: zce91z8 0.23s ease;
  animation-fill-mode: forwards;
}
[data-zce91z4] .zce91zg.anim-slideBottom.vt-active {
  view-transition-name: zce91zd;
}
.zce91zg.anim-slideRight {
  animation: zce91za 0.23s ease;
  animation-fill-mode: forwards;
}
[data-zce91z4] .zce91zg.anim-slideRight.vt-active {
  view-transition-name: zce91ze;
}
::view-transition-old(zce91zc) {
  animation: zce91z7 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
::view-transition-old(zce91zd) {
  animation: zce91z9 0.23s ease;
  animation-fill-mode: forwards;
}
::view-transition-old(zce91ze) {
  animation: zce91zb 0.23s ease;
  animation-fill-mode: forwards;
}
.zce91zh {
  --zce91z0: ;
  --zce91z1: ;
  --zce91z2: ;
  width: var(--zce91z0);
  height: var(--zce91z1);
  min-height: var(--zce91z2);
  max-height: calc(100dvh - 32px);
  max-width: calc(100dvw - 20px);
  box-sizing: border-box;
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 1.6;
  padding: 20px 24px;
  position: relative;
  background-color: var(--affine-background-overlay-panel-color);
  box-shadow: var(--affine-popover-shadow);
  border-radius: 12px;
  outline: none;
}
[data-full-screen="true"] .zce91zh {
  --zce91z0: 100dvw;
  --zce91z1: calc(100dvh - var(--zce91z3));
  --zce91z2: calc(100dvh - var(--zce91z3));
  max-width: 100dvw;
  max-height: 100dvh;
  border-radius: 0;
}
.zce91zi {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: var(--affine-z-index-modal);
}
.zce91zj {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 12px;
}
.zce91zk {
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
[data-modal="false"].zce91zg {
  pointer-events: none;
}
[data-modal="false"] .zce91zh {
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .zce91zg {
    transition: none;
  }
}
._8g13s60.zce91zh {
  background-color: var(--affine-v2-layer-background-overlayPanel);
  box-shadow: var(--affine-menu-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 24px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
._8g13s61 {
  display: flex;
  align-items: start;
  transition: transform 0.23s;
}
._8g13s62 {
  box-sizing: border-box;
  font-size: 17px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  flex-shrink: 0;
  padding: 13px 0px 13px 0px;
  max-height: calc(100dvh - 32px);
}
._8g13s63 {
  width: 100%;
  padding: 10px 20px;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  line-height: 22px;
  touch-action: manipulation;
}
._8g13s63:hover {
  --_16dum7p2: transparent;
}
._8g13s63:active {
  --_16dum7p2: var(--affine-hover-color);
}
._8g13s63.danger {
  --_16dum7p1: var(--affine-v2-button-error);
  --_16dum7p0: var(--affine-v2-button-error);
}
._8g13s63.danger:hover {
  --_16dum7p2: transparent;
}
._8g13s63.danger:active {
  --_16dum7p2: var(--affine-background-error-color);
}
._8g13s63.warning:hover {
  --_16dum7p2: transparent;
}
._8g13s63.warning:active {
  --_16dum7p2: var(--affine-background-warning-color);
}
._8g13s63[data-divider=true] {
  margin-bottom: 16px;
  position: relative;
}
._8g13s63[data-divider=true]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._8g13s63[data-divider=true]:last-child {
  margin-bottom: 0;
}
._8g13s63[data-divider=true]:last-child::after {
  display: none;
}
._8g13s64 {
  height: 42px;
  align-self: start;
  font-weight: 600;
  font-size: 17px;
  padding-left: 0;
  margin-left: 20px;
  max-width: calc(100% - 20px);
}
._8g13s65 {
  max-height: 80dvh;
}
._1fo8bpa0 {
  display: flex;
  flex-direction: column;
}
._1fo8bpa3 {
  height: 100%;
  overflow-y: auto;
  padding: 12px 4px 20px 4px;
}
._1fo8bpa4 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 40px;
  margin-top: auto;
  gap: 20px;
}
._1fo8bpa4.modalFooterWithChildren {
  padding-top: 20px;
}
._1fo8bpa4.reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
._1fo8bpa6 {
  display: flex;
  flex-direction: column;
  padding: 12px 0 !important;
  border-radius: 22px;
}
._1fo8bpa7 {
  padding: 11px 22px;
}
._1fo8bpa8 {
  padding: 10px 16px;
  margin-bottom: 0px !important;
}
._1fo8bpa9 {
  padding: 11px 22px;
}
._1fo8bpaa {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1fo8bpaa.row {
  flex-direction: row;
  justify-content: space-between;
}
._1fo8bpaa.reverse {
  flex-direction: column-reverse;
}
._1fo8bpaa.rowReverse {
  flex-direction: row-reverse;
}
._1fo8bpab {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
}
._1fo8bpab.row {
  width: auto;
  min-width: 0;
  max-width: 140px;
  flex: 1;
  height: 32px;
}
.ry1sxi2[data-top] {
  padding-top: calc(var(--ry1sxi0) + 12px);
}
.ry1sxi2[data-bottom] {
  padding-bottom: calc(var(--ry1sxi1, 0px) + 0px);
}
.ry1sxi2[data-standalone][data-top] {
  padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 12px)) + var(--ry1sxi0));
}
.ry1sxi2[data-standalone][data-bottom] {
  padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--ry1sxi1, 0px));
}
._1yl8s6m0 {
  padding: 20px 24px 8px 24px;
  font-size: var(--affine-font-h-6);
  font-family: var(--affine-font-family);
  font-weight: 600;
  line-height: 26px;
}
._1yl8s6m1 {
  padding: 0px 24px 8px;
  font-size: var(--affine-font-base);
  line-height: 24px;
  font-weight: 400;
}
._1yl8s6m2 {
  padding: 20px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
._1yl8s6m3 {
  font-weight: 500;
}
._1yl8s6m4 {
  color: var(--affine-pure-white);
  text-decoration: none;
  cursor: pointer;
}
._1yl8s6m4:visited {
  color: var(--affine-pure-white);
}
._1rg9bpp0 {
  display: flex;
  flex-direction: column;
}
._1rg9bpp3 {
  height: 100%;
  overflow-y: auto;
  padding: 12px 4px 20px 4px;
}
._1rg9bpp4 {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
  padding: 8px 0;
}
._1rg9bpp7 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 40px;
  margin-top: auto;
  gap: 20px;
}
._1rg9bpp7.modalFooterWithChildren {
  padding-top: 20px;
}
._1rg9bpp7.reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
._1rg9bpp9 {
  display: flex;
  flex-direction: column;
  padding: 12px 0 !important;
  border-radius: 22px;
}
._1rg9bppa {
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1rg9bppb {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
  padding: 8px 16px;
}
._1rg9bppc {
  padding: 10px 16px;
  margin-bottom: 0px !important;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1rg9bppd {
  padding: 0 16px;
}
._1rg9bppe {
  height: 44px;
  font-size: 17px;
  line-height: 22px;
}
._1rg9bppf {
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1rg9bppg {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1rg9bppg.reverse {
  flex-direction: column-reverse;
}
._1rg9bpph {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
.dacqsz0 {
  --scrollbar-width: 8px;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.dacqsz1 {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  transition: opacity .3s .2s;
  opacity: 0;
  background: var(--affine-border-color);
}
.dacqsz1[data-has-scroll-top="true"] {
  opacity: 1;
}
.dacqsz2 {
  height: 100%;
  width: 100%;
}
.dacqsz2 >:first-child {
  display: contents !important;
}
.dacqsz3 {
  height: 100%;
}
.dacqsz4 {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  width: var(--scrollbar-width);
  height: 100%;
  opacity: 1;
  transition: width .15s;
}
.dacqsz4:hover {
  background: var(--affine-background-secondary-color);
  width: calc(var(--scrollbar-width) + 3px);
  border-left: 1px solid var(--affine-border-color);
}
.dacqsz4[data-state="hidden"] {
  opacity: 0;
}
.dacqsz5 {
  display: none;
}
.dacqsz6 {
  margin-top: 60px;
  height: calc(100% - 120px);
  border-radius: 4px;
}
.dacqsz7 {
  position: relative;
  background: var(--affine-divider-color);
  width: 50%;
  overflow: hidden;
  border-radius: 4px;
}
.dacqsz7:hover {
  background: var(--affine-icon-color);
}
.dacqsz7::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}
.opfa8p0 {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 6px;
  padding: 12px;
  cursor: default;
  width: 100%;
  background-color: var(--affine-v2-layer-background-primary);
  gap: 12px;
}
.opfa8p1 {
  display: flex;
  align-items: flex-start;
  font-weight: 500;
  font-size: 16px;
  color: var(--affine-v2-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
  gap: 12px;
}
.opfa8p2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}
.opfa8p3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.opfa8p4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.opfa8p5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
}
.opfa8p6 {
  flex: 1;
}
.opfa8p7 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
}
.opfa8p8 {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opfa8p9 {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--affine-v2-layer-background-secondary);
  color: var(--affine-v2-icon-primary);
}
.opfa8pa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.opfa8pb {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--affine-v2-text-primary);
  border: none;
  border-radius: 4px;
  padding: 4px;
  min-width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.opfa8pb:hover {
  background-color: var(--affine-v2-layer-background-secondary);
}
.opfa8pb:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.opfa8pc {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.opfa8pd {
  width: 100%;
  height: 12px;
  background-color: var(--affine-v2-layer-background-tertiary);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.opfa8pe {
  height: 100%;
  background-color: var(--affine-v2-icon-fileIconColors-red);
  transition: width 0.1s linear;
}
.opfa8pf {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  min-width: 48px;
}
.opfa8pf:last-of-type {
  text-align: right;
}
.opfa8pg {
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
  cursor: pointer;
}
.opfa8ph {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 4px;
  padding: 8px;
  cursor: default;
  width: 100%;
  background-color: var(--affine-v2-layer-background-primary);
}
.opfa8pi {
  font-size: var(--affine-font-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  margin-bottom: 2px;
}
.opfa8pj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.opfa8pk {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.opfa8pl {
  position: absolute;
  right: 8px;
  top: 8px;
  display: none;
  background: var(--affine-v2-layer-background-secondary);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.opfa8ph:hover .opfa8pl {
  display: block;
}
.hz589u0 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
  max-width: 2000px;
  min-width: 0;
  flex: 1;
}
@keyframes n7k55r2 {
  0% {
    top: -44%;
    left: -11%;
    transform: matrix(-0.29, -0.96, 0.94, -0.35, 0, 0);
  }
  16% {
    left: -18%;
    top: -51%;
    transform: matrix(-0.73, -0.69, 0.64, -0.77, 0, 0);
  }
  32% {
    left: -7%;
    top: -40%;
    transform: matrix(-0.97, -0.23, 0.16, -0.99, 0, 0);
  }
  48% {
    left: -15%;
    top: -39%;
    transform: matrix(-0.88, 0.48, -0.6, -0.8, 0, 0);
  }
  64% {
    left: -7%;
    top: -40%;
    transform: matrix(-0.97, -0.23, 0.16, -0.99, 0, 0);
  }
  80% {
    left: -18%;
    top: -51%;
    transform: matrix(-0.73, -0.69, 0.64, -0.77, 0, 0);
  }
  100% {
    top: -44%;
    left: -11%;
    transform: matrix(-0.29, -0.96, 0.94, -0.35, 0, 0);
  }
}
@keyframes n7k55r3 {
  0% {
    left: -30px;
    top: -30px;
    transform: matrix(-0.48, -0.88, 0.8, -0.6, 0, 0);
  }
  16% {
    left: -37px;
    top: -37px;
    transform: matrix(-0.86, -0.52, 0.39, -0.92, 0, 0);
  }
  32% {
    left: -20px;
    top: -10px;
    transform: matrix(-1, -0.02, -0.12, -0.99, 0, 0);
  }
  48% {
    left: -27px;
    top: -2px;
    transform: matrix(-0.88, 0.48, -0.6, -0.8, 0, 0);
  }
  64% {
    left: -20px;
    top: -10px;
    transform: matrix(-1, -0.02, -0.12, -0.99, 0, 0);
  }
  80% {
    left: -37px;
    top: -37px;
    transform: matrix(-0.86, -0.52, 0.39, -0.92, 0, 0);
  }
  100% {
    left: -30px;
    top: -30px;
    transform: matrix(-0.48, -0.88, 0.8, -0.6, 0, 0);
  }
}
.n7k55r4 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.n7k55r5 {
  width: 83%;
  height: 81%;
  position: absolute;
  left: -30%;
  top: -30%;
  transform: matrix(-0.48, -0.88, 0.8, -0.6, 0, 0);
  opacity: 0.8;
  filter: blur(var(--n7k55r1));
  transform-origin: center center;
  animation: n7k55r3 3s ease-in-out forwards infinite;
  animation-play-state: paused;
}
.n7k55r6 {
  animation-play-state: running;
}
.n7k55r7 {
  width: 98%;
  height: 97%;
  position: absolute;
  top: -44%;
  left: -11%;
  transform: matrix(-0.29, -0.96, 0.94, -0.35, 0, 0);
  opacity: 0.8;
  filter: blur(var(--n7k55r1));
  transform-origin: center center;
  will-change: left, top, transform;
  animation: n7k55r2 3s ease-in-out forwards infinite;
  animation-play-state: paused;
}
.n7k55r8 {
  animation-play-state: running;
}
.n7k55r9 {
  width: 104%;
  height: 94%;
  position: absolute;
  right: -30%;
  top: -30%;
  opacity: 0.8;
  filter: blur(var(--n7k55r1));
  transform: matrix(-0.28, -0.96, 0.93, -0.37, 0, 0);
  transform-origin: center center;
}
.n7k55ra {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.n7k55rb {
  --n7k55r0: unset;
  width: var(--n7k55r0);
  height: var(--n7k55r0);
  font-size: calc(var(--n7k55r0) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden;
}
.n7k55rc {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.n7k55rd {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.n7k55rd > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.n7k55re {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--affine-primary-color);
  color: var(--affine-white);
  line-height: 1;
  font-weight: 500;
}
.n7k55rf {
  background-color: var(--affine-v2-portrait-localPortraitBackground);
}
.n7k55rg {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(60, 61, 63, 0.5);
  z-index: 1;
  color: var(--affine-pure-white);
  opacity: 0;
  transition: opacity .15s;
  cursor: pointer;
}
.n7k55rg:hover {
  opacity: 1;
}
.n7k55rh {
  position: absolute;
  right: -8px;
  top: -2px;
  visibility: hidden;
  z-index: 1;
}
.n7k55ra:hover .n7k55rh {
  visibility: visible;
}
._1cy4vd4 {
  flex: 1;
}
._1cy4vd5 {
  width: 0;
}
._1cy4vd6 {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
._1cy4vd6::before, ._1cy4vd6::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
._1cy4vd7::after {
  transition: background-color 0.2s ease;
}
._1cy4vd7:hover::after {
  background-color: var(--affine-hover-color);
}
._1cy4vd8::before {
  opacity: 0;
  box-shadow: 0 0 0 2px var(--affine-brand-color);
}
._1cy4vd8::after {
  border: 1px solid transparent;
}
._1cy4vd8:focus-visible::before {
  opacity: 0.5;
}
._1cy4vd8:focus-visible::after {
  border-color: var(--affine-brand-color);
}
._1cy4vd9[disabled], ._1cy4vd9[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--affine-text-disable-color);
}
._1cy4vdb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_1cy4vd3);
  height: var(--_1cy4vd3);
  flex-basis: var(--_1cy4vd3);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1cy4vdc {
  min-width: calc(28px * 7 + var(--_1cy4vd0) * 6);
}
._1cy4vdd {
  display: flex;
  flex-direction: column;
  gap: var(--_1cy4vd1);
}
._1cy4vde {
  display: flex;
  align-items: center;
}
._1cy4vdf {
  height: auto;
}
._1cy4vdg {
  width: 0;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
}
[data-is-left="true"] ._1cy4vdg {
  justify-content: flex-start;
  margin-left: -24px;
}
[data-is-right="true"] ._1cy4vdg {
  justify-content: flex-end;
  margin-right: -30px;
}
[data-mode="month"] [data-is-left="true"] ._1cy4vdg {
  margin-left: -36px;
}
[data-mode="month"] [data-is-right="true"] ._1cy4vdg {
  margin-right: -44px;
}
[data-mode="year"] [data-is-left="true"] ._1cy4vdg {
  margin-left: -48px;
}
[data-mode="year"] [data-is-right="true"] ._1cy4vdg {
  margin-right: -52px;
}
._1cy4vdh {
  display: inline-flex;
  line-height: 22px;
  font-size: var(--_1cy4vd2);
  font-weight: 600;
  padding: 0 6px;
  border-radius: 4px;
  white-space: nowrap;
}
[data-mobile="true"] ._1cy4vdh {
  padding: 0px 4px;
}
._1cy4vdi {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1cy4vdj {
  width: 8px;
}
._1cy4vdk {
  font-size: var(--_1cy4vd2);
  font-weight: 400;
  line-height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--affine-icon-color);
  text-transform: uppercase;
}
._1cy4vdl {
  display: flex;
  flex-direction: column;
  gap: var(--_1cy4vd1);
}
._1cy4vdm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_1cy4vd0);
}
._1cy4vdn {
  font-size: var(--_1cy4vd2);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  height: 28px;
}
._1cy4vdp {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  font-size: var(--_1cy4vd2);
  color: var(--affine-text-primary-color);
  font-weight: 400;
}
._1cy4vdp[data-is-today="true"] {
  font-weight: 600;
  color: var(--affine-brand-color);
}
._1cy4vdp[data-not-current-month="true"] {
  color: var(--affine-black-10);
}
._1cy4vdp[data-selected="true"] {
  background-color: var(--affine-brand-color);
  font-weight: 500;
  color: var(--affine-pure-white);
}
._1cy4vdq {
  gap: 18px;
  padding-top: 18px;
}
._1cy4vds {
  height: 34px;
}
._1cy4vdt {
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 24px;
}
._1cy4vdt[data-selected="true"] {
  background: transparent;
  color: var(--affine-text-emphasis-color);
  font-weight: 500;
}
._1cy4vdw {
  max-width: 100px;
}
._1dweys40 {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  max-height: 39px;
}
._1dweys41 {
  width: 0;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1dweys42 {
  position: relative;
  width: 0;
  flex-grow: 1;
  min-width: 30px;
  max-width: 130px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 4px 1px 4px;
  border-radius: 4px;
  font-family: var(--affine-font-family);
  font-weight: 500;
  font-size: 12px;
}
._1dweys42:hover {
  background-color: var(--affine-hover-color);
}
._1dweys42[data-today="true"]:not([data-active="true"]) {
  --cell-color: var(--affine-brand-color);
}
._1dweys42[data-active="true"] {
  --cell-color: var(--affine-pure-white);
  background: var(--affine-brand-color);
}
._1dweys42::before, ._1dweys42::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
}
._1dweys42::before {
  box-shadow: 0 0 0 2px var(--affine-brand-color);
}
._1dweys42::after {
  border: 1px solid var(--affine-brand-color);
}
._1dweys42:focus-visible::before {
  opacity: 0.5;
}
._1dweys42:focus-visible::after {
  opacity: 1;
}
._1dweys43 {
  width: 100%;
  height: 16px;
  line-height: 16px;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  color: var(--cell-color, var(--affine-text-secondary-color));
}
._1dweys44 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: var(--cell-color, var(--affine-text-primary-color));
}
._1desc9b3 {
  --_1desc9b0: 8px;
  position: absolute;
  top: 0;
  right: 0;
  left: var(--_1desc9b1);
  bottom: 0;
  pointer-events: none;
}
._1desc9b3::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--_1desc9b0);
  height: var(--_1desc9b0);
  left: 0;
  background: transparent;
  border-color: var(--_1desc9b2);
  border-width: 2px;
  border-radius: 50%;
  border-style: solid;
}
._1desc9b3::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: var(--_1desc9b2);
  left: calc(var(--_1desc9b0) / 2);
  height: 2px;
  right: 0;
}
._1desc9b3[data-no-terminal="true"]::before {
  display: none;
}
._1desc9b4::before {
  top: 0;
  transform: translate(calc(-0.5 * var(--_1desc9b0)), calc(-0.5 * var(--_1desc9b0)));
}
._1desc9b4::after {
  top: -1px;
}
._1desc9b5::before {
  bottom: 0;
  transform: translate(calc(-0.5 * var(--_1desc9b0)), calc(0.5 * var(--_1desc9b0)));
}
._1desc9b5::after {
  bottom: -1px;
}
._1desc9b6 {
  position: absolute;
  top: 0;
  right: 0;
  left: var(--_1desc9b1);
  bottom: 0;
  pointer-events: none;
  border: 2px solid var(--_1desc9b2);
  border-radius: 3px;
}
._1desc9b7 {
  height: 2px;
  left: calc(var(--_1desc9b0)/2);
  right: 0;
}
._1desc9b7::before {
  left: calc(-1 * var(--_1desc9b0));
}
._1desc9b8 {
  width: 2px;
  top: calc(var(--_1desc9b0)/2);
  bottom: 0;
}
._1desc9b8::before {
  top: calc(-1 * var(--_1desc9b0));
}
._1desc9ba {
  top: var(--_1desc9b9);
}
._1desc9ba::before {
  top: calc(-1 * var(--_1desc9b0) + 1px);
}
._1desc9bb {
  right: var(--_1desc9b9);
}
._1desc9bb::before {
  right: calc(-1 * var(--_1desc9b0) + 1px);
}
._1desc9bc {
  bottom: var(--_1desc9b9);
}
._1desc9bc::before {
  bottom: calc(-1 * var(--_1desc9b0) + 1px);
}
._1desc9bd {
  left: var(--_1desc9b9);
}
._1desc9bd::before {
  left: calc(-1 * var(--_1desc9b0) + 1px);
}
._1desc9be {
  --_1desc9b0: 6px;
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: var(--affine-primary-color);
}
._1desc9be::before {
  content: "";
  width: 0;
  height: 0;
  box-sizing: border-box;
  position: absolute;
  border: var(--_1desc9b0) solid var(--affine-primary-color);
  border-radius: 50%;
}
._1desc9be[data-no-terminal="true"]::before {
  display: none;
}
._17zryhe0 {
  cursor: grab;
  color: var(--affine-v2-icon-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
._17zryhe1 {
  border-radius: 8px;
}
._17zryhe0[data-dragging="true"] ._17zryhe1, ._17zryhe0:hover ._17zryhe1 {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1nqghsz0 {
  position: relative;
  border-radius: 4px;
  padding: 4px;
  display: inline-block;
  min-width: 50px;
  min-height: 28px;
}
._1nqghsz1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-wrap: break-word;
  border: 1px solid transparent;
}
._1nqghsz0[data-editing="true"] ._1nqghsz1 {
  opacity: 0;
  visibility: hidden;
}
._1nqghsz2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
._1nqghsz0[data-editing="true"] ._1nqghsz2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
._1nqghsz3 {
  opacity: 0.8;
}
._14g37x10 {
  color: var(--affine-error-color);
  font-size: 0.6rem;
  margin: 4px 8px 2px 2px;
}
._16nb1vz0 {
  width: 390px;
  max-width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
}
._16nb1vz1 {
  padding: 12px 12px 0px 12px;
}
._16nb1vz2 {
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  display: flex;
  justify-content: space-between;
}
._16nb1vz3 {
  background-color: transparent;
}
._16nb1vz4 {
  margin-bottom: 6px;
  font-size: 14px;
}
._16nb1vz5 {
  height: 0;
  flex-grow: 1;
}
._1litiyr0 {
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
._1litiyr1 {
  padding: 16px 12px 8px 12px;
  display: flex;
  gap: 8px;
}
._1litiyr2 {
  width: 0;
  flex-grow: 1;
  height: 32px !important;
  border-radius: 4px !important;
  gap: 0px !important;
}
._1litiyr3 {
  min-height: 200px;
  flex-grow: 1;
}
._1litiyr4 {
  padding-top: 8px;
}
._1litiyr5 {
  padding: 0px 12px;
}
._1litiyr6 {
  padding: 8px 0px;
}
._1litiyr7:not(:last-child) {
  margin-bottom: 8px;
}
._1litiyr8 {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0px 4px;
  background-color: var(--affine-v2-layer-background-overlayPanel);
}
._1litiyr9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
}
._1litiyr9::after {
  content: "";
  flex: auto;
  min-width: 24px;
}
._1dz0ny71 {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
._1dz0ny73 {
  height: 120px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--affine-v2-text-secondary);
}
._1dz0ny74 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-top: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._1dz0ny76 {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1dz0ny77 {
  color: var(--affine-v2-icon-secondary);
}
._1dz0ny78 {
  color: var(--affine-v2-icon-primary);
}
._1mmal4x0 {
  position: relative;
}
._1mmal4x0.scrollable {
  overflow-y: auto;
}
._1mmal4x1 {
  z-index: 1;
}
._1mmal4x2 {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
._1mmal4x3 {
  z-index: 1;
}
._1mmal4x4 {
  position: absolute;
}
.aixu9c0 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.aixu9c0:hover {
  background-color: var(--onix-accent, rgba(0, 0, 0, 0.05));
  transform: scale(1.05);
}
._3pfiqg0 {
  padding: 4px;
  border-radius: 8px;
}
._3pfiqg1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._3pfiqg2 {
  padding: 0;
  line-height: 1;
  color: var(--affine-v2-icon-primary);
}
._3pfiqg3 {
  display: contents;
}
._3pfiqg2 span:has(svg) {
  line-height: 0;
}
._3pfiqg4 {
  flex-shrink: 0;
  font-size: 24px;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
._3pfiqg4[data-icon-type="emoji"] {
  font-size: 20px;
}
._3pfiqg5 {
  height: 32px;
  border-radius: 4px;
  width: 0;
  flex-grow: 1;
}
._3pfiqg6 {
  padding: 0;
}
em-emoji-picker {
  --shadow: none;
  --font-family: var(--affine-font-family);
}
em-emoji-picker #root {
  background: transparent;
}
.jcitlr7 {
  border-radius: 8px;
  box-shadow: var(--affine-shadow-1);
  border-width: 1px;
  border-style: solid;
  background-color: var(--jcitlr0);
  border-color: var(--jcitlr2);
  color: var(--jcitlr1);
}
.jcitlr8 {
  padding: 16px;
}
.jcitlr9 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.jcitlra {
  height: 24px;
  display: flex;
  align-items: center;
}
.jcitlrb {
  width: 24px;
  display: flex;
  place-items: center;
  margin-right: 10px;
}
.jcitlrb svg {
  width: 100%;
  height: 100%;
  color: var(--jcitlr4);
}
.jcitlrc {
  width: 0;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  line-height: 24px;
  font-size: 15px;
  margin-right: 10px;
}
.jcitlrd {
  color: var(--jcitlr3);
  position: relative;
  background: transparent;
  border: none;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
.jcitlre[data-float="true"] {
  position: absolute;
  top: 16px;
  right: 16px;
}
.jcitlrf {
  color: var(--jcitlr5) !important;
}
.jcitlrg {
  margin-top: 5px;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
[data-with-icon] .jcitlrg[data-align="title"] {
  padding-left: 34px;
}
@keyframes _1icxw8a0 {
  from {
    max-width: 44px;
  }
  to {
    max-width: 100vw;
  }
}
._1icxw8a1 {
  --mobile-offset-left: 0px !important;
  --mobile-offset-right: 0px !important;
}
._1icxw8a2 {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 44px;
  border-radius: 22px;
  margin: 0px auto;
  padding: 10px;
  background-color: var(--jcitlr0);
  color: var(--jcitlr1);
  border: 1px solid var(--jcitlr2);
  box-shadow: var(--affine-shadow-1);
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
  transition: transform 0.1s;
}
._1icxw8a2:active {
  transform: scale(0.97);
}
._1icxw8a2[data-animated="true"] {
  visibility: hidden;
}
._1icxw8a2[data-animated="false"] {
  max-width: 44px;
  animation: _1icxw8a0 0.8s cubic-bezier(.27,.28,.13,.99);
  animation-fill-mode: forwards;
}
._1icxw8a3 {
  font-size: 24px;
  line-height: 0;
  color: var(--jcitlr4);
}
._1icxw8a4 {
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.43px;
  white-space: nowrap;
}
._1icxw8a5 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: start;
  padding: 16px;
  z-index: 9999;
  background: rgba(0,0,0,0.1);
}
._1icxw8a7 {
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
._1icxw8a8 {
  padding: 0 20px;
  margin-top: 8px;
}
._1icxw8aa {
  width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1icxw8ab {
  display: flex;
  flex-direction: column;
}
.wzsebr1 {
  --wzsebr0: 10px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.wzsebr2 {
  height: var(--wzsebr0);
  flex: 1;
  background: var(--affine-v2-layer-background-hoverOverlay);
  border-radius: 5px;
  position: relative;
}
.wzsebr3 {
  height: var(--wzsebr0);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.wzsebr4 {
  width: 28px;
  height: 28px;
  transform: translate(1px, -9px);
  border-radius: 50%;
  display: block;
  background: var(--affine-v2-layer-background-primary);
  box-shadow: var(--affine-overlay-panel-shadow);
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}
.wzsebr1:hover .wzsebr4, .wzsebr4:is(:focus-visible, :focus-within) {
  opacity: 1;
}
.wzsebr5 {
  width: 40px;
  font-size: var(--affine-font-sm);
  text-align: right;
}
.wzsebr6 {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  transition: background 0.2s ease-in-out;
}
.wzsebr1:hover .wzsebr6, .wzsebr6:has(.wzsebr4:is(:focus-visible, :focus-within, :active)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.wzsebr7 {
  background: var(--affine-v2-toast-iconState-regular);
}
[data-state="complete"].wzsebr7 {
  background: var(--affine-v2-status-success);
}
.wzsebr8 {
  background: var(--onix-success);
}
.wzsebr9 {
  background: var(--onix-warning);
}
.wzsebra {
  background: var(--onix-destructive);
}
._1dyd53g0 {
  display: flex;
  gap: 4px;
  min-height: 30px;
  position: relative;
  flex-wrap: wrap;
}
._1dyd53g0[draggable="true"] {
  cursor: grab;
}
._1dyd53g0[draggable="true"][data-dragging="true"] {
  visibility: hidden;
}
._1dyd53g0[draggable="true"]:before {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 15px;
  left: 0;
  border-radius: 2px;
  background-color: var(--onix-muted-foreground);
  transform: translate(-6px, -50%);
  transition: height 0.2s 0.1s, opacity 0.2s 0.1s;
  opacity: 0;
  height: 4px;
  width: 4px;
  will-change: height, opacity;
}
._1dyd53g0[draggable="true"]:after {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 15px;
  left: 0;
  border-radius: 2px;
  background-color: transparent;
  transform: translate(-8px, -50%);
  height: 100%;
  width: 8px;
  will-change: height, opacity;
}
._1dyd53g0[draggable="true"]:hover:before {
  height: 12px;
  opacity: 1;
}
._1dyd53g1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1dyd53g2 {
  overflow: hidden;
  height: 0px;
  min-height: 0px;
  padding: 0px;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}
._1dyd53g3 {
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  justify-content: start;
  position: relative;
  border-radius: 4px;
  font-size: 14px;
  padding: 4px;
  flex-shrink: 0;
  line-height: 22px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--onix-muted-foreground);
  width: 160px;
  height: 30px;
}
._1dyd53g3[data-has-menu="true"] {
  cursor: pointer;
}
._1dyd53g3[data-has-menu="true"]:hover {
  background-color: var(--onix-accent);
}
[data-drag-preview] ._1dyd53g3:hover {
  background-color: transparent;
}
._1dyd53g4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
._1dyd53g5 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 16px;
  color: var(--onix-muted-foreground);
}
._1dyd53g6 {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
._1dyd53g7 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  padding: 4px;
  flex: 1;
}
._1dyd53g7:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
._1dyd53g7::-moz-placeholder {
  color: var(--onix-muted-foreground);
}
._1dyd53g7::placeholder {
  color: var(--onix-muted-foreground);
}
._1dyd53g7[data-readonly="false"][data-hoverable="true"] {
  cursor: pointer;
}
._1dyd53g7[data-readonly="true"][data-hoverable="true"] {
  cursor: default;
}
._1dyd53g7[data-hoverable="true"]:is(:hover, :focus-within) {
  background-color: var(--onix-accent);
}
._1dyd53g8 {
  align-self: flex-start;
  font-size: 14px;
  color: var(--onix-muted-foreground);
  padding: 0 8px 0px 4px;
  height: 30px;
  font-weight: 400;
  gap: 6px;
}
._1dyd53g8 svg {
  font-size: 16px;
  color: var(--onix-muted-foreground);
}
._1dyd53g8:hover svg {
  color: var(--onix-foreground);
}
._1dyd53g9 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1dyd53ga {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px;
  min-height: 30px;
}
._1dyd53gb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}
._1dyd53gc {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--onix-foreground);
}
._1dyd53gd {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
._1dyd53gd[data-collapsed="true"] {
  color: var(--onix-muted-foreground);
}
._1dyd53ge {
  transition: all 0.2s ease-in-out;
  color: var(--onix-foreground);
  font-size: 20px;
}
._1dyd53ge[data-collapsed="true"] {
  transform: rotate(90deg);
  color: var(--onix-muted-foreground);
}
._1dyd53gf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1dyd53gf[hidden] {
  display: none;
}
@media print {
  ._1dyd53g8 {
    display: none;
  }
}
._1t3amju1[data-disabled] {
  opacity: 0.5;
}
._1t3amju2 {
  width: 100%;
  height: 1px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
}
._1t3amju2[data-disabled] {
  cursor: not-allowed;
}
._1t3amju3 {
  width: calc(100% - var(--_1t3amju0));
  transform: translateX(calc(var(--_1t3amju0) * 0.5));
  height: 1px;
  background-color: var(--affine-v2-layer-insideBorder-border);
  position: relative;
  display: flex;
  justify-content: space-between;
}
._1t3amju4 {
  height: 100%;
  background-color: var(--affine-v2-icon-primary);
  border-radius: 1px;
  position: absolute;
  top: 0;
  left: 0;
}
._1t3amju5 {
  width: var(--_1t3amju0);
  height: var(--_1t3amju0);
  background-color: var(--affine-v2-icon-primary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
._1t3amju5[data-disabled] {
  cursor: not-allowed;
}
._1t3amju6 {
  width: 8px;
  height: 8px;
  border: 2px solid transparent;
  background-color: var(--affine-v2-layer-insideBorder-border);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
._1t3amju6[data-active="true"] {
  background-color: var(--affine-v2-icon-primary);
}
._1t3amju6[data-disabled="true"] {
  cursor: not-allowed;
}
.rkt0924 {
  --rkt0920: 256px;
  --rkt0921: 0;
  position: relative;
  width: var(--rkt0920);
  min-width: var(--rkt0920);
  height: 100%;
  z-index: 4;
  transform: translateX(0);
  max-width: 50%;
}
.rkt0924[data-open="false"][data-handle-position="right"],.rkt0924[data-is-floating="true"][data-handle-position="right"] {
  margin-left: calc(var(--rkt0920) * -1);
}
.rkt0924[data-open="false"][data-handle-position="left"],.rkt0924[data-is-floating="true"][data-handle-position="left"] {
  margin-right: calc(var(--rkt0920) * -1);
}
.rkt0924[data-open="true"][data-handle-position="right"][data-is-floating="true"] {
  transform: translateX(calc(var(--rkt0920) + 4px));
}
.rkt0924[data-open="true"][data-handle-position="left"][data-is-floating="true"] {
  transform: translateX(calc(var(--rkt0920) * -1));
}
.rkt0924[data-enable-animation="true"] {
  transition: margin-left var(--rkt0923), margin-right var(--rkt0923), transform var(--rkt0923), background var(--rkt0923);
}
.rkt0924[data-transition-state="exited"] {
  visibility: hidden;
}
.rkt0925 {
  contain: strict;
  width: 100%;
  height: 100%;
}
.rkt0926 {
  position: relative;
  height: 100%;
  overflow: auto;
}
.rkt0927 {
  position: absolute;
  right: var(--rkt0921);
  top: var(--rkt0922);
  bottom: var(--rkt0922);
  width: 8px;
  z-index: 1;
  transform: translateX(50%);
  background-color: transparent;
  opacity: 0;
  display: flex;
  justify-content: center;
  cursor: col-resize;
  transition: opacity 0.15s ease 0.1s;
}
.rkt0927[data-resizing="true"], .rkt0927:hover {
  opacity: 1;
}
.rkt0927[data-open="false"] {
  display: none;
}
.rkt0927[data-open="open"] {
  display: block;
}
.rkt0927[data-handle-position="left"] {
  left: var(--rkt0921);
  right: auto;
  transform: translateX(-50%);
}
.rkt0928 {
  position: absolute;
  height: 100%;
  width: 2px;
  border-radius: 2px;
  background-color: var(--onix-primary);
  transition: all 0.2s ease-in-out;
  transform: translateX(0.5px);
}
.rkt0927[data-resizing="true"] .rkt0928 {
  width: 4px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .rkt0927 {
    display: none;
  }
}
._1mkly3x0 {
  height: 100%;
  width: 100%;
  position: relative;
}
._1mkly3x1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.jgtnhx0 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 35px;
}
.jgtnhx1 {
  max-width: 100%;
  width: 300px;
}
.jgtnhx2 {
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
  margin-bottom: 4px;
}
.jgtnhx3 {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 0;
  max-width: 300px;
}
.jgtnhx4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.jgtnhx5 {
  display: flex;
  gap: 16px;
}
.jgtnhx7 {
  padding: 8px 18px;
  height: auto;
  font-weight: 600;
}
.jgtnhx8 {
  padding: 0 4px;
}
.jgtnhx9 {
  padding: 0 4px;
}
._1mzbynl0 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
._1mzbynl1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  gap: 8px;
  padding: 16px;
  max-width: 400px;
  transition: max-width 0.3s ease-in-out;
}
._1mzbynl1[data-show-stack="true"] {
  max-width: 600px;
}
._1mzbynl2 {
  width: 100%;
  overflow: hidden;
  text-wrap: wrap;
  word-break: break-word;
}
._1mzbynl3 {
  height: auto;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  color: var(--affine-v2-text-secondary);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
._1mzbynl3[data-show-stack="true"] {
  max-height: 200px;
}
._1mzbynl4 {
  max-width: 100%;
  width: 300px;
  align-self: center;
}
._1mzbynl5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--affine-v2-text-primary);
  margin-bottom: 4px;
}
._1mzbynl6 {
  display: flex;
  margin-top: 16px;
  width: 100%;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
._1mzbynl7 {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 120px;
}
._1mzbynl8 {
  display: flex;
  align-items: center;
}
._1mzbynl9 {
  transition: transform 0.3s ease-in-out;
  margin-left: 8px;
  width: 16px;
  height: 16px;
}
._1mzbynl9[data-show-stack="true"] {
  transform: rotate(180deg);
}
.vz76ih0 {
  display: flex;
  align-items: center;
  height: 100%;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.vz76ih1 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.vz76ih1:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1cucjdk0 {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--affine-font-base);
  position: relative;
}
._1cucjdk1 {
  color: inherit;
}
._1cucjdk2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 120px;
}
._1cucjdk3 {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
._1cucjdk4 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 18px;
}
._1cucjdk5 {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
._1cucjdk6 {
  color: var(--affine-link-color);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--affine-font-sm);
  cursor: pointer;
}
._1cucjdk7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
._1cucjdk8 {
  margin-top: 20px;
  margin-bottom: 12px;
}
._1cucjdk9 {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  align-items: center;
}
._1cucjdka {
  font-weight: 500;
  text-decoration: none;
  color: var(--affine-link-color);
  font-size: var(--affine-font-sm);
}
._1cucjdkb {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  position: absolute;
  bottom: 48px;
}
._1cucjdkc {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
}
._14qjcog0 {
  padding-bottom: 8px;
}
._14qjcog0[data-has-border=true] {
  border-right: 0.5px solid var(--onix-border);
}
._14qjcog0[data-is-floating="true"], ._14qjcog0[data-is-electron="false"] {
  background-color: var(--onix-background);
}
._14qjcog1[data-is-floating="true"] {
  background-color: var(--onix-background);
  height: calc(100% - 60px);
  margin-top: 52px;
  margin-left: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}
._14qjcog1[data-is-floating="true"][data-is-electron="true"] {
  height: 100%;
  margin-top: -4px;
}
._14qjcog1[data-is-floating="true"][data-client-border="true"] {
  background-color: var(--onix-popover);
}
._14qjcog1[data-is-floating="true"][data-client-border="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--onix-noise-opacity, 0);
  background-repeat: repeat;
  background-size: 50px;
  background-image: var(--noise-background);
}
._14qjcog2 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
._14qjcog3 {
  display: flex;
  align-items: center;
  -moz-column-gap: 32px;
       column-gap: 32px;
}
._14qjcog4 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
._14qjcog5 {
  flex: 0 0 auto;
  height: 52px;
  padding: 0px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._14qjcog6 {
  flex: 1 1 auto;
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
._14qjcog7 {
  transition: opacity .15s;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}
._14qjcog7[data-open="true"][data-is-floating="true"] {
  opacity: 1;
  pointer-events: auto;
  right: 0;
  z-index: 3;
}
._14qjcog8 {
  align-items: flex-end;
  margin-bottom: 2px;
}
@media print {
  ._14qjcog0 {
    display: none;
    z-index: -1;
  }
  ._14qjcog7 {
    display: none;
  }
}
.dbygiz0 {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100%;
  transition: max-width 0.2s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease;
}
.dbygiz0:after {
  content: "";
  position: absolute;
  left: 19.75px;
  top: 6.25px;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease;
  background-color: var(--onix-primary);
}
.dbygiz0[data-show=true] {
  opacity: 1;
  max-width: 60px;
}
.dbygiz0[data-show=false] {
  opacity: 0;
  max-width: 0;
}
.dbygiz0[data-notification=true]:after {
  transform: scale(1);
}
.dbygiz1 {
  transition: clip-path 0.3s ease;
  clip-path: path(evenodd, "M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 M19 4.25C19 4.38807 19.1119 4.5 19.25 4.5C19.3881 4.5 19.5 4.38807 19.5 4.25C19.5 4.11193 19.3881 4 19.25 4C19.1119 4 19 4.11193 19 4.25Z");
}
.dbygiz1[data-notification=true] {
  clip-path: path(evenodd, "M 0 0 L 24 0 L 24 24 L 0 24 L 0 0 M23 5.25C23 7.59721 21.0972 9.5 18.75 9.5C16.4028 9.5 14.5 7.59721 14.5 5.25C14.5 2.90279 16.4028 1 18.75 1C21.0972 1 23 2.90279 23 5.25Z");
}
._11kfkv30 {
  display: flex;
  height: 100%;
  overflow: clip;
  width: 100%;
  position: relative;
  flex-direction: column;
  min-width: 0;
  background: var(--onix-background);
}
._11kfkv31 {
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  flex-shrink: 0;
  background: var(--onix-background);
  padding: 0 16px;
  contain: strict;
}
._11kfkv31[data-show-switch=true] {
  padding-left: 8px;
}
._11kfkv32 {
  display: flex;
  flex: 1;
  overflow: hidden;
  contain: strict;
}
._11kfkv33 {
  margin: 0 16px 0 0;
}
._11kfkv33:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 1px;
}
._11kfkv34 {
  transition: all 0.2s ease-in-out;
}
._11kfkv34:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 1px;
}
._11kfkv34[data-show=true] {
  opacity: 1;
  width: 32px;
  max-width: 32px;
  margin-left: 16px;
}
._11kfkv34[data-show=false] {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  pointer-events: none;
}
._11kfkv35 {
  display: flex;
  height: 100%;
  width: 0;
  flex-grow: 1;
  min-width: 12px;
}
@media print {
  ._11kfkv31 {
    display: none;
  }
}
._1f0ioa80 {
  display: flex;
  background: var(--onix-background);
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
[data-client-border=true] ._1f0ioa80 {
  border-radius: 6px;
  border: 0.5px solid var(--onix-border);
}
[data-client-border=true][data-is-floating="true"] ._1f0ioa80 {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--onix-border);
}
._1f0ioa81 {
  display: flex;
  flex-direction: column;
  height: 0;
  flex: 1;
  width: 100%;
  align-items: center;
}
._1f0ioa82 {
  border-top: 0.5px solid var(--onix-border);
}
._1f0ioa83 {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--onix-muted-foreground);
  align-items: center;
}
._16rvek70 {
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  flex-shrink: 0;
  padding: 0 16px;
  z-index: 1;
  gap: 12px;
  background: var(--onix-background);
}
._16rvek71 {
  flex-grow: 1;
  min-width: 12px;
}
._16rvek72 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 52px;
  position: relative;
}
._16rvek73:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 1px;
}
@media print {
  ._16rvek70 {
    display: none;
  }
}
.h9n0uw0 {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
._19s31x20 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
._19s31x21 {
  flex: 1;
}
._19s31x22 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._19s31x23 {
  font-size: 18px;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  box-shadow: 0px 0px 0px 1px var(--affine-v2-layer-insideBorder-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--affine-v2-integrations-background-iconSolid);
}
._19s31x24 {
  font-size: 18px;
  color: var(--affine-v2-icon-primary);
}
._1tveihy0 {
  padding: 8px;
  width: 100%;
  max-width: 415px;
  box-sizing: border-box;
}
._1tveihy1 {
  padding: 0;
}
._1tveihy2 {
  width: 100%;
}
._1tveihy3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
}
._1tveihy4 {
  width: 100%;
  position: relative;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
._1tveihy5 {
  flex-shrink: 0;
}
._1tveihy6 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
@keyframes fp87f23 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.fp87f20 {
  transform: rotate(-90deg);
}
.fp87f21 {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fp87f22 {
  transition: stroke-dasharray 0.3s ease-in-out;
}
.fp87f24 {
  animation: fp87f23 1s linear infinite;
}
._17t5vxt0 {
  color: var(--onix-foreground);
}
._17t5vxt1 {
  padding: 8px 0 0 0;
  width: 340px;
}
._17t5vxt2 {
  padding: 0;
  background-color: var(--onix-popover);
}
._17t5vxt3 {
  width: 100%;
  font-size: 12px;
}
._17t5vxt4 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 12px;
  gap: 8px;
  overflow: hidden;
}
._17t5vxt5 {
  color: var(--onix-muted-foreground);
}
._17t5vxt6 {
  color: #1E96F0;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
._17t5vxt7 {
  display: flex;
  flex-direction: column;
}
._17t5vxt8 {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  gap: 8px;
  overflow: hidden;
}
._17t5vxt9 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
._17t5vxta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
._17t5vxtb {
  display: flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  color: var(--onix-foreground);
}
._17t5vxtb:hover {
  background-color: var(--onix-accent);
}
._17t5vxtc {
  width: 100%;
  position: relative;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
._17t5vxtd {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 24px;
}
._17t5vxte {
  height: 136px;
  border-radius: 2px;
}
._17t5vxtf {
  border-radius: 2px;
  height: 100%;
}
._17t5vxtg {
  width: 100%;
  height: 100%;
  background-color: var(--affine-v2-database-attachment-fileSolidBackground);
  padding: 1px 4px;
  font-size: 14px;
  line-height: 22px;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._17t5vxth {
  height: 24px;
  border-radius: 2px;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
._17t5vxti {
  display: flex;
  align-items: center;
  border-top: 1px solid;
  border-color: var(--onix-border);
}
._17t5vxtj {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
}
._17t5vxtk {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._17t5vxtl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1isfvod0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding: 8px;
  width: 214px;
}
._1isfvod1 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 4px;
  align-items: center;
  border: 1px solid transparent;
  border-color: var(--affine-v2-layer-insideBorder-blackBorder);
}
._1isfvod1:focus-within {
  border-color: var(--onix-primary);
  box-shadow: var(--affine-active-shadow);
}
._1isfvod2 {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  color: var(--onix-foreground);
}
._1isfvod3 {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: auto;
}
._1isfvod4 {
  background-color: var(--onix-accent);
}
._1isfvod5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--onix-foreground);
  font-size: 16px;
  cursor: pointer;
  border-radius: 2px;
}
._1isfvod5:hover {
  background-color: var(--onix-muted);
}
._1isfvod6 {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  padding: 2px;
  border-radius: 2px;
  border: 1px solid transparent;
  border-color: var(--affine-v2-layer-insideBorder-blackBorder);
  background-color: var(--onix-secondary);
}
._1isfvod7 {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px;
  border-radius: 4px;
}
._1isfvod8 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  flex: 1;
}
._1isfvod9 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1isfvoda {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
}
._1isfvodb {
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--onix-foreground);
  font-size: 14px;
  line-height: 22px;
}
.ermckv0 {
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}
.ermckv1 {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}
.ermckv2 {
  height: 100%;
  flex: 1;
}
.ermckv3 {
  display: block;
}
.ermckv3:has(affine-ai-panel-widget[data-state='generating']) {
  padding-bottom: 980px;
}
.ermckv3:has(affine-ai-panel-widget[data-state='finished']) {
  padding-bottom: 980px;
}
.ermckv3:has(affine-ai-panel-widget[data-state='error']) {
  padding-bottom: 980px;
}
.ermckv4 {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  cursor: text;
  flex-grow: 1;
}
.ermckv5 {
  font-size: 24px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 0px;
}
.ermckv6 {
  color: var(--onix-muted-foreground);
}
.ermckv7 {
  color: var(--onix-primary);
}
.ermckv8 {
  vertical-align: middle;
  font-size: 1.1em;
  transform: translate(2px, -1px);
}
.ermckv9 {
  display: flex;
  width: 100%;
  justify-content: center;
}
.ermckva {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: var(--affine-editor-width);
  padding: 0 var(--affine-editor-side-padding, 24px);
}
@container viewport (width <= 640px) {
  .ermckva {
    padding: 0 16px;
  }
}
.nmnnov0 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  z-index: 2;
  pointer-events: none;
}
.nmnnov1 {
  display: flex;
  align-items: center;
  padding: 4px;
  margin-right: 8px;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.nmnnov2 {
  display: flex;
  align-items: center;
  color: var(--onix-foreground);
}
.nmnnov3 {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Inter;
}
.nmnnov4 {
  color: var(--onix-foreground);
  font-weight: 600;
  line-height: 30px;
}
.nmnnov5 {
  color: var(--onix-muted-foreground);
  font-weight: 400;
  line-height: 24px;
  font-size: 15px;
}
.nmnnov5[data-collapsed="true"] {
  color: var(--onix-foreground);
  font-weight: 500;
}
.nmnnov6 {
  padding: 4px;
  pointer-events: auto;
  color: var(--affine-v2-icon-transparentBlack);
  border-radius: 4px;
  gap: 0;
}
.nmnnov7 {
  font-weight: 500;
}
._12qb7nj0 {
  position: fixed;
  inset: 0;
  z-index: var(--affine-z-index-modal);
  background-color: var(--affine-v2-layer-background-modal);
  pointer-events: auto;
}
._12qb7nj0[data-anime-state="animating"] {
  opacity: 0;
}
._12qb7nj1 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--affine-z-index-modal);
}
._12qb7nj2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
._12qb7nj1[data-mode="max"] ._12qb7nj2 {
  width: calc(100% - 64px);
  height: calc(100% - 64px);
}
._12qb7nj1[data-mode="full"] ._12qb7nj2 {
  width: 100%;
  height: 100%;
}
._12qb7nj1[data-mode="fit"] ._12qb7nj2 {
  width: 90%;
  height: 90%;
  max-width: 1248px;
}
._12qb7nj2[data-anime-state="animating"] {
  opacity: 0;
}
._12qb7nj3 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
._12qb7nj4 {
  background-color: var(--affine-background-overlay-panel-color);
  box-shadow: var(--affine-shadow-3);
}
._12qb7nj5 {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 300px;
  outline: none;
  position: relative;
}
._12qb7nj5[data-no-interaction=true] {
  pointer-events: none;
}
._12qb7nj6 {
  position: absolute;
  right: -48px;
  top: 0;
  z-index: -1;
  min-width: 48px;
  padding: 8px 0 0 16px;
  pointer-events: auto;
}
@media screen and (width <= 640px) {
  ._12qb7nj1:is([data-mode="max"], [data-mode="fit"]) ._12qb7nj2 {
    height: 80%;
    width: calc(100% - 32px);
    padding-right: 0;
    padding-bottom: 32px;
    align-self: flex-end;
  }
  ._12qb7nj6 {
    top: -48px;
    right: 0;
    left: 0;
    padding: 8px;
  }
}
@media screen and (width > 640px) and (width <= 1024px) {
  ._12qb7nj1[data-mode="fit"] ._12qb7nj2 {
    padding-right: 12px;
  }
  ._12qb7nj6 {
    padding-left: 0;
  }
}
.v6jh8g0 {
  vertical-align: middle;
  font-size: 1.1em;
  transform: translate(2px, -1px);
}
.v6jh8g1 {
  text-decoration: none;
  color: inherit;
  word-break: break-word;
  hyphens: auto;
}
.v6jh8g2 {
  color: var(--affine-v2-text-secondary);
  text-decoration: line-through;
}
affine-reference .affine-reference {
  color: inherit !important;
  text-decoration: none !important;
}
.rs2k4v0 {
  font-size: inherit;
  display: inline-flex;
  align-items: baseline;
}
.rs2k4v1 {
  opacity: 0.5;
}
.rs2k4v2 {
  opacity: 0.5;
  text-decoration: line-through;
}
.rs2k4v3[data-show-name="true"] {
  margin-right: 0.5em;
}
.p27suc0 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: auto;
}
.p27suc1 {
  padding: 4px 8px;
  color: var(--onix-foreground);
  font-size: 12px;
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p27suc2 {
  font-size: 24px;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p27suc3 {
  display: flex;
  color: var(--affine-v2-aI-errorText);
}
.affine-attachment-container:has(.p27suc0) {
  border: none;
  overflow: visible;
  height: -moz-fit-content !important;
  height: fit-content !important;
}
._8v1rob0 {
  border-radius: 6px;
}
._1tjvajb0 {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  resize: none;
}
._1tjvajb0:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
._1tjvajb0:not(.gridding):before {
  background-color: var(--onix-card);
}
._1tjvajb0.gridding:before {
  opacity: 0.25;
  background-size: 20px 20px;
  background-image: linear-gradient(var(--affine-v2-button-grabber-default) 1px, transparent 1px), linear-gradient(to right, var(--affine-v2-button-grabber-default) 1px, transparent 1px);
}
._1tjvajb1 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
._1tjvajb2 {
  display: flex;
  justify-content: space-between;
  height: 52px;
  padding: 10px 8px;
  background: var(--onix-background);
  font-size: 12px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
  border-top-width: 0.5px;
  border-top-style: solid;
  border-top-color: var(--onix-border);
  text-wrap: nowrap;
  overflow: hidden;
}
._1tjvajb3 {
  overflow: hidden;
}
._1tjvajb2 > ._1tjvajb3 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
}
._1tjvajb3.zoom:not(.show) {
  display: none;
}
._1tjvajb4 {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-wrap: break-word;
}
._15i5fm00 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._15i5fm01 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--onix-foreground);
  margin-top: 12px;
}
._15i5fm02 {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._15i5fm03 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
._18zri1q0 {
  width: 100%;
}
._18zri1q1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 40px);
  gap: 20px;
}
._18zri1q1.small-gap {
  gap: 12px;
}
._18zri1q2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._18zri1q3 {
  display: flex;
  align-self: center;
  justify-content: center;
  overflow: hidden;
  text-wrap: wrap;
  width: 100%;
  word-break: break-word;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--affine-v2-text-primary);
}
._18zri1q4 {
  max-width: 100%;
}
._18zri1q5 {
  display: flex;
  align-self: center;
  width: 179.66px;
  height: 253px;
  aspect-ratio: 539 / 759;
  overflow: hidden;
}
._8sjqch0 {
  width: 100%;
}
._8sjqch1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
._8sjqch2 {
  max-width: calc(100% - 40px);
  background: var(--affine-v2-layer-white);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--onix-border);
  box-shadow: 0px 4px 20px 0px var(--transparent-black-200, rgba(0, 0, 0, 0.10));
  overflow: hidden;
  max-height: -moz-max-content;
  max-height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
._8sjqch3 {
  display: flex;
  flex-direction: column;
  position: absolute;
  box-sizing: border-box;
  width: 120px;
  padding: 12px 0;
  right: 30px;
  bottom: 30px;
  max-height: calc(100% - 60px);
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--onix-border);
  background-color: var(--onix-background);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._8sjqch4 {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
._8sjqch4.collapsed {
  display: none;
}
._8sjqch4:not(.collapsed) {
  margin-bottom: 8px;
}
._8sjqch5 {
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--onix-border);
}
._8sjqch5.selected {
  border-color: #29A3FA;
}
._8sjqch6 {
  width: 100%;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--onix-border);
  background: var(--onix-background);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  content-visibility: visible;
  display: flex;
  min-height: -moz-fit-content;
  min-height: fit-content;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
._8sjqch7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  background: var(--onix-card);
  flex: 1;
}
._8sjqch8 {
  position: absolute;
  max-width: calc(100% - 24px);
  overflow: hidden;
  height: auto;
  pointer-events: none;
}
._8sjqch9 {
  position: absolute;
  bottom: 16px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._8sjqcha {
  width: 36px;
  height: 36px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--onix-border);
  background: var(--affine-white);
}
._8sjqchb {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  text-wrap: nowrap;
}
._8sjqchc {
  display: flex;
  align-items: center;
}
._8sjqchc.truncate {
  overflow: hidden;
}
._8sjqchd {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--onix-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._8sjqche {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._8sjqchf {
  margin: auto;
}
._8sjqchg {
  position: absolute;
  left: 18px;
  bottom: 18px;
}
._8sjqchh {
  width: 244px;
  gap: 8px;
  color: var(--onix-foreground);
  line-height: 22px;
}
._8sjqchi {
  display: flex;
  justify-content: flex-end;
}
.fr438k1 {
  font-size: 20px;
  width: 1em;
  height: 1em;
  margin-right: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--affine-icon-secondary);
}
.fr438k2 {
  font-size: 14px;
  line-height: 1.5;
  color: var(--affine-text-primary-color);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr438k0 [cmdk-root] {
  height: 100%;
}
.fr438k0 [cmdk-group-heading] {
  padding: 8px;
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  font-weight: 600;
  line-height: 1.67;
}
.fr438k0 [cmdk-group][hidden] {
  display: none;
}
.fr438k0 [cmdk-list] {
  max-height: 400px;
  min-height: 80px;
  overflow: auto;
  overscroll-behavior: contain;
  height: min(330px, calc(var(--cmdk-list-height) + 8px));
  margin: 8px 6px;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--affine-icon-color) transparent;
}
.fr438k0 [cmdk-list]:not([data-opening]) {
  transition: height .1s ease;
}
.fr438k0 [cmdk-list]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.fr438k0 [cmdk-list]::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-clip: padding-box;
}
.fr438k0 [cmdk-list]:hover::-webkit-scrollbar-thumb {
  background-color: var(--affine-divider-color);
}
.fr438k0 [cmdk-list]:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--affine-icon-color);
}
.fr438k0 [cmdk-item] {
  display: flex;
  min-height: 44px;
  padding: 6px 12px;
  align-items: center;
  cursor: default;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.fr438k0 [cmdk-item][data-selected=true] {
  background: var(--affine-background-secondary-color);
}
.fr438k0 [cmdk-item][data-selected=true][data-is-danger=true] {
  background: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
.fr438k0 [cmdk-item][data-selected=true] .fr438k1 {
  color: var(--affine-icon-color);
}
.fr438k0 [cmdk-item][data-selected=true][data-is-danger=true] .fr438k1 {
  color: var(--affine-error-color);
}
.fr438k0 [cmdk-item][data-selected=true][data-is-danger=true] .fr438k2 {
  color: var(--affine-error-color);
}
.fr438k3 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fr438k4 {
  display: flex;
  align-items: center;
  padding: 18px 16px 0;
  width: 100%;
}
.fr438k5 {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  background-color: var(--affine-background-secondary-color);
}
.fr438k6 {
  height: 66px;
  padding: 18px 16px;
  margin-bottom: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--affine-border-color);
  flex-shrink: 0;
}
.fr438k7 {
  padding-top: 12px;
  padding-bottom: 18px;
}
.fr438k8 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-h-5);
  width: 100%;
}
.fr438k8::-moz-placeholder {
  color: var(--affine-text-secondary-color);
}
.fr438k8::placeholder {
  color: var(--affine-text-secondary-color);
}
.fr438k9 {
  display: flex;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  min-width: 120px;
  flex-direction: row-reverse;
}
.fr438ka {
  display: flex;
  font-size: var(--affine-font-xs);
  -moz-column-gap: 2px;
       column-gap: 2px;
}
.fr438kb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--affine-text-secondary-color);
  background-color: var(--affine-background-tertiary-color);
  min-width: 24px;
  height: 20px;
  text-transform: uppercase;
}
.fr438kc {
  font-size: var(--affine-font-base);
  line-height: 24px;
  font-weight: 400;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr438kd {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  text-align: justify;
}
.fr438ke {
  padding: 0px 8px 8px;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-status-error);
}
._1vmt6s20 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1vmt6s21 {
  display: inline-block;
  vertical-align: bottom;
  color: var(--affine-primary-color);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 360px;
}
@keyframes zs9lca0 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes zs9lca1 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.zs9lca2 {
  position: fixed;
  inset: 0;
  background-color: transparent;
  z-index: var(--affine-z-index-modal);
}
.zs9lca3 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--affine-z-index-modal);
  padding: 13vh 16px 16px;
}
.zs9lca5 {
  width: 640px;
  background-color: var(--affine-background-overlay-panel-color);
  box-shadow: var(--affine-cmd-shadow);
  border-radius: 12px;
  max-width: calc(100vw - 50px);
  min-width: 480px;
  outline: none;
  position: relative;
  z-index: var(--affine-z-index-modal);
  will-change: transform, opacity;
}
.zs9lca5[data-state=entered], .zs9lca5[data-state=entering] {
  animation: zs9lca0 var(--zs9lca4) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
.zs9lca5[data-state=exited], .zs9lca5[data-state=exiting] {
  animation: zs9lca1 var(--zs9lca4) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
@media screen and (max-width: 520px) {
  .zs9lca5 {
    min-width: auto;
  }
}
._1dorgwz0 {
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: all;
  transform-origin: 0 0;
  font-weight: 400;
  line-height: var(--affine-line-height);
}
._1dorgwz1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2;
  transition: opacity 0.3s;
}
._1dorgwz1:hover {
  opacity: 1;
}
._1dorgwz1.flip {
  transform: translateX(-50%) rotate(180deg);
}
._1dorgwz2 {
  position: absolute;
  border-color: var(--affine-black-10);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
._1dorgwz0[data-editing="true"] ._1dorgwz2 {
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
  box-shadow: var(--affine-active-shadow);
}
._1dorgwz3 {
  width: 100%;
  height: 100%;
}
._1dorgwz4 {
  position: absolute;
  background: var(--affine-white);
  opacity: 0.5;
  pointer-events: none;
  border: 2px var(--affine-blue) solid;
  border-top: unset;
  border-radius: 0 0 8px 8px;
}
._1ll4jns0 {
  position: absolute;
  border-color: var(--affine-black-10);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
._1dorgwz0[data-editing="true"] ._1ll4jns0 {
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s;
  box-shadow: var(--affine-active-shadow);
}
._5wvbkd0 {
  position: relative;
}
._5wvbkd0 .doc-title-container {
  padding: 26px 0px;
  margin-left: unset;
  margin-right: unset;
}
._1qwcr3z0 {
  position: absolute;
  left: 0;
  bottom: 8px;
  padding: 10px 18px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 14px;
  font-style: normal;
  font-size: 12px;
  flex-direction: column;
  border-radius: 8px;
  background-color: var(--affine-background-overlay-panel-color);
}
._1qwcr3z1 {
  display: flex;
  width: 100%;
  height: 20px;
  align-items: center;
  justify-content: space-between;
}
._1qwcr3z2 {
  font-weight: 600;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
}
._1qwcr3z3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: var(--affine-v2-icon-primary);
}
._1qwcr3z4 {
  display: flex;
  width: 100%;
  gap: 2px;
  flex-direction: column;
}
._1qwcr3z5 {
  display: flex;
  height: 20px;
  align-items: center;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
._1qwcr3z6 {
  font-weight: 400;
}
._1qwcr3z7 {
  display: flex;
  gap: 2px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
._1qwcr3z8 {
  display: flex;
  align-items: center;
  line-height: 20px;
}
._1qwcr3z9 {
  scale: 0.8;
}
.rxf56l0 {
  position: relative;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  flex-grow: 1;
  overflow-y: scroll;
}
.rxf56l1 {
  position: relative;
}
.rxf56l2 {
  width: 100%;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
  padding-left: 8px;
  height: 40px;
  box-sizing: border-box;
  padding: 6px 8px;
  margin-top: 8px;
}
.rxf56l3 {
  height: 2px;
  border-radius: 1px;
  background-color: var(--affine-brand-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  contain: layout size;
  width: 100%;
}
.rxf56l4 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.rxf56l5 {
  margin-top: 240px;
  align-self: center;
  width: 190px;
  height: 48px;
  color: var(--affine-v2-text-secondary);
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
._1bzqu0o0 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
._1bzqu0o0[data-status="dragging"] {
  pointer-events: none;
  opacity: 0.5;
}
._1bzqu0o0[data-sortable="true"] {
  padding: 2px 0px;
}
._1bzqu0o1 {
  position: relative;
  width: 100%;
  border-radius: 4px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1bzqu0o0[data-sortable="true"] ._1bzqu0o1:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1bzqu0o0[data-status="selected"] ._1bzqu0o1 {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1bzqu0o0[data-status="dragging"] ._1bzqu0o1 {
  background: var(--affine-v2-layer-background-hoverOverlay);
  opacity: 0.9;
}
._1bzqu0o2 {
  padding: 0 8px;
  width: 100%;
  min-height: 28px;
  display: none;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}
._1bzqu0o2:hover {
  cursor: grab;
}
._1bzqu0o0[data-sortable="true"] ._1bzqu0o2 {
  display: flex;
}
._1bzqu0o0[data-visibility="edgeless"] ._1bzqu0o2:hover {
  cursor: default;
}
._1bzqu0o0[data-visibility="edgeless"] ._1bzqu0o3 {
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
._1bzqu0o4 {
  display: flex;
  align-items: center;
  justify-content: center;
}
._1bzqu0o5 {
  text-align: center;
  font-size: var(--affine-font-sm);
  color: var(--affine-brand-color);
  font-weight: 500;
  line-height: 14px;
}
._1bzqu0o6 {
  height: 1px;
  flex: 1;
  border-top: 1px dashed var(--affine-border-color);
  transform: translateY(50%);
}
._1bzqu0o7 {
  display: none;
  position: absolute;
  right: 8px;
  top: -6px;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}
._1bzqu0o1:hover ._1bzqu0o7 {
  display: flex;
}
._1bzqu0o8 {
  display: flex;
  border-radius: 4px;
  background-color: var(--affine-hover-color);
  align-items: center;
}
._1bzqu0o9 {
  display: flex;
  padding: 2px 0px 2px 4px;
  align-items: center;
}
._1bzqu0oa {
  font-family: var(--affine-font-sans-family);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--affine-v2-text-primary);
}
._1bzqu0oa:hover {
  cursor: pointer;
}
._1bzqu0ob {
  position: absolute;
  display: none;
  background: var(--affine-v2-layer-background-overlayPanel);
  border-radius: 8px;
  box-shadow: var(--affine-shadow-2);
  box-sizing: border-box;
  padding: 8px;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
  line-height: 22px;
  font-weight: 400;
  font-family: var(--affine-font-sans-family);
}
._1bzqu0ob[data-show] {
  display: flex;
}
._19bukzz0 {
  font-family: var(--affine-font-family);
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  white-space: nowrap;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 8px;
}
._19bukzz0:hover {
  cursor: pointer;
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.active > ._19bukzz0 {
  color: var(--affine-v2-text-emphasis);
}
._19bukzz0:not(:has(span)) {
  display: none;
}
._19bukzz1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  padding: 4px;
  background: var(--affine-v2-layer-background-secondary);
  border-radius: 4px;
  color: var(--affine-v2-icon-primary);
}
._19bukzz2 {
  color: var(--affine-v2-icon-disable);
}
._19bukzz3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  height: 22px;
}
._19bukzz4 {
  font-weight: 400;
  padding-left: 28px;
}
._19bukzz5 {
  font-weight: 600;
  padding-left: 0;
}
._19bukzz6 {
  font-weight: 600;
  padding-left: 0;
}
._19bukzz7 {
  font-weight: 600;
  padding-left: 4px;
}
._19bukzz8 {
  font-weight: 600;
  padding-left: 12px;
}
._19bukzz9 {
  font-weight: 600;
  padding-left: 16px;
}
._19bukzza {
  font-weight: 600;
  padding-left: 20px;
}
._19bukzzb {
  font-weight: 600;
  padding-left: 24px;
}
._19bukzzc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._19bukzzd {
  font-size: inherit;
  border-bottom: 0.5px solid var(--affine-divider-color);
  white-space: break-spaces;
  margin-right: 2px;
}
._19bukzze {
  color: var(--affine-v2-text-disable);
}
._19bukzzf > svg {
  margin-bottom: 0.1em;
}
._19bukzzg {
  color: var(--affine-v2-text-disable);
  text-decoration: line-through;
}
._13fgo681 {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 16px;
}
._13fgo682 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._13fgo683 {
  width: 119px;
  height: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
}
._13fgo684 {
  display: none;
  justify-content: center;
  align-items: center;
  background: var(--affine-v2-layer-background-overlayPanel);
  box-shadow: var(--affine-shadow-2);
  border-radius: 8px;
}
._13fgo684[data-show] {
  display: flex;
}
.bga5me1 {
  padding: 8px;
  width: 220px;
  display: flex;
  flex-direction: column;
}
.bga5me2 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 4px 12px;
  align-items: center;
}
.bga5me3 {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  padding: 0 4px;
}
.bga5me4 {
  gap: 4px;
}
.bga5me5 {
  width: 138px;
  height: 20px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
.bga5me6 {
  display: flex;
}
._1o6048u0 {
  display: flex;
  flex-direction: column;
  background-color: var(--affine-v2-layer-background-primary);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-family: var(--affine-font-sans-family);
  padding-top: 8px;
  position: relative;
}
._1hmzv5l0 {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._1hmzv5l1 {
  margin: auto 2rem;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
._1hmzv5l2 {
  max-width: 100%;
  width: 300px;
  align-self: center;
}
._1hmzv5l3 {
  width: 100%;
  text-align: center;
  max-width: 261px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0;
}
._1hmzv5l3[data-longer-loading="true"] {
  max-width: 400px;
}
._1hmzv5l4 {
  margin-right: 8px;
}
._1hmzv5l5 {
  font-size: var(--affine-font-base);
  line-height: 1.6;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
._1hmzv5l6 {
  font-size: var(--affine-font-sm);
  line-height: 1.6;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
  text-wrap: wrap;
  word-break: break-word;
  text-align: center;
}
._1hmzv5l6[data-longer-loading="true"] {
  text-align: start;
}
._1hmzv5l7 {
  margin-top: 24px;
}
._1hmzv5l8 {
  padding: 8px 18px;
  height: auto;
  font-weight: 600;
  margin-top: 24px;
}
._1hmzv5l9 {
  padding: 0 4px;
}
._1hmzv5la {
  padding: 0 4px;
}
._10p91l40 {
  position: absolute;
  top: 204px;
  right: 22px;
  max-height: calc(100% - 204px - 76px);
  display: flex;
}
@container (width <= 640px) {
  ._10p91l40 {
    display: none;
  }
}
._1soh4se0 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: var(--affine-font-base);
  position: relative;
  background-color: var(--affine-background-primary-color);
  background-size: cover;
}
._1soh4se1 {
  color: inherit;
}
._1soh4se2 {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  padding: 16px 120px;
}
._1soh4se3 {
  height: 52px;
  width: 100%;
  position: fixed;
  -webkit-app-region: drag;
}
._1soh4se4 {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
._1soh4se5 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 18px;
}
._1soh4se6 {
  font-size: 24px;
  pointer-events: auto;
}
._1soh4se6.plain {
  color: var(--affine-text-primary-color);
}
._1soh4se9 {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: var(--affine-background-primary-color);
  border-radius: 0;
  border: none;
  box-shadow: none;
}
._1soh4sea {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 12px 20px;
  max-width: 100%;
  position: relative;
  border-radius: 0;
  transition: background 0.3s ease;
}
._1soh4sea:after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: calc(100% - 40px);
  height: 0.5px;
  background: var(--affine-black-10);
}
._1soh4sea:not(:last-of-type) {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  ._1soh4se2 {
    padding: 16px 20px;
  }
  ._1soh4se4 {
    display: none;
  }
  ._1soh4se8 {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  ._1soh4se7 {
    display: none;
    position: absolute;
  }
}
.al35l0 {
  font-size: var(--affine-font-base);
  color: var(--affine-text-primary-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}
.al35l1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.al35l2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  margin-top: auto;
  padding-top: 120px;
  margin-bottom: auto;
}
.al35l3 {
  box-shadow: var(--affine-large-button-effect) !important;
}
.al35l4 {
  max-width: 100%;
  width: 670px;
}
.gg01700 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 422px;
}
.gg01701 {
  margin-bottom: 20px;
}
.gg01701 .logo {
  font-size: var(--affine-font-h-3);
  font-weight: 600;
  color: var(--affine-black);
  margin-right: 6px;
  vertical-align: middle;
}
.gg01701 > p:first-of-type {
  font-size: var(--affine-font-h-5);
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 28px;
  display: flex;
  align-items: center;
}
.gg01701 > p:last-of-type {
  font-size: var(--affine-font-h-4);
  font-weight: 600;
  line-height: 28px;
}
.gg01702 {
  font-size: var(--affine-font-base);
  line-height: var(--affine-font-h-3);
  flex-grow: 1;
}
.gg01702 > *:not(:last-child) {
  margin-bottom: 20px;
}
.gg01703 {
  position: relative;
}
.gg01703.with-hint {
  margin-bottom: 8px;
}
.gg01704 > *:not(:last-child) {
  margin-bottom: 20px;
}
.gg01703 label {
  display: block;
  color: var(--affine-text-secondary-color);
  margin-bottom: 4px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
}
.gg01705 {
  color: var(--affine-error-color);
  font-size: var(--affine-font-xs);
  line-height: 20px;
  min-height: 20px;
}
.gg01702 a {
  color: var(--affine-link-color);
}
.gg01706 {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--affine-font-base);
}
.gg01706 .wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  overflow: hidden;
}
.gg01706 .content {
  max-width: 810px;
}
.gg01706 .title {
  font-size: var(--affine-font-title);
  font-weight: 600;
  margin-bottom: 28px;
}
.gg01706 .subtitle {
  margin-bottom: 28px;
}
.gg01706 a {
  color: var(--affine-link-color);
}
.gg01707 {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gg01708 {
  width: 330px;
  position: relative;
}
.gg0170a {
  flex-shrink: 0;
  width: 670px;
}
@media screen and (min-width: 1024px) {
  .gg01706 .content {
    margin-left: 200px;
    min-width: 500px;
    margin-right: 60px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
  }
}
@media screen and (max-width: 1024px) {
  .gg01706 {
    flex-direction: column;
    padding: 100px 20px;
    justify-content: flex-start;
  }
  .gg01706 .wrapper {
    flex-direction: column;
    justify-content: flex-start;
  }
  .gg01706 .content {
    max-width: 600px;
    width: 100%;
    margin: auto;
  }
  .gg01709 {
    display: none;
  }
}
@media screen and (max-width: 520px) {
  .gg01708 {
    width: 100%;
  }
}
.xcexuf0 {
  position: absolute;
  right: 10px;
}
.xcexuf1 {
  padding: 2px 15px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: var(--affine-font-xs);
}
.xcexuf1.weak {
  background-color: var(--affine-tag-red);
  color: var(--affine-error-color);
}
.xcexuf1.medium {
  background-color: var(--affine-tag-orange);
  color: var(--affine-warning-color);
}
.xcexuf1.strong {
  background-color: var(--affine-tag-green);
  color: var(--affine-success-color);
}
.xcexuf1.minimum, .xcexuf1.maximum {
  background-color: var(--affine-tag-red);
  color: var(--affine-error-color);
}
._1h1jzd20 {
  background-color: var(--affine-background-primary-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
._1h1jzd20[data-is-macos-electron="true"] {
  margin: 8px;
  border-radius: 8px;
  height: calc(100vh - 16px);
}
._1h1jzd21 {
  padding-top: 24px;
  padding-right: 24px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  -webkit-app-region: drag;
}
._1h1jzd21[data-is-windows-electron="true"] {
  padding-top: 0;
  padding-right: 0;
  gap: 16px;
}
._1h1jzd22 {
  padding: 20px;
  position: sticky;
  bottom: 0;
  background-color: var(--affine-background-primary-color);
}
._1h1jzd23 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 200px 160px;
}
._1h1jzd24 {
  max-width: 600px;
}
._1h1jzd25 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-height: 450px;
}
._1h1jzd26 {
  font-family: Inter;
  font-size: var(--affine-font-h-1);
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
._1h1jzd27 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-grow: 1;
}
._1h1jzd28 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}
._1h1jzd29 {
  align-items: center;
  font-size: 24px;
}
._1h1jzd29 svg {
  color: var(--affine-brand-color);
  flex-shrink: 0;
  margin-right: 8px;
}
._1h1jzd2a {
  font-size: var(--affine-font-base);
  font-weight: 500;
}
._1h1jzd2b {
  width: 520px;
}
._1h1jzd2c {
  font-weight: 600;
  font-size: var(--affine-font-base);
}
._1h1jzd2d {
  align-self: flex-start;
}
._1h1jzd2e {
  position: absolute;
  display: none;
  pointer-events: none;
}
._1h1jzd2f {
  margin-right: 24px;
}
._1h1jzd2g {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1h1jzd2h {
  font-size: var(--affine-font-title);
  font-weight: 700;
  line-height: 44px;
}
._1h1jzd2i {
  font-size: var(--affine-font-h-6);
  height: 300px;
  font-weight: 600;
  line-height: 26px;
}
._1h1jzd2j {
  display: flex;
  font-size: var(--affine-font-xs);
  height: 16px;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
  background-color: var(--affine-background-primary-color);
}
._1h1jzd2k {
  color: var(--affine-text-secondary-color);
}
._1h1jzd2k:visited {
  color: var(--affine-text-secondary-color);
}
@media screen and (max-width: 1024px) {
  ._1h1jzd23 {
    padding: 0px 36px 80px;
  }
  ._1h1jzd24 {
    padding: 40px 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  ._1h1jzd2b {
    width: 100%;
  }
}
._1vsyzju0 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  line-height: 20px;
}
._1vsyzju0 a {
  color: var(--affine-link-color);
}
._1vsyzju0 .link {
  cursor: pointer;
  color: var(--affine-link-color);
}
._1vsyzju1 {
  margin: auto;
  margin-bottom: 4px;
  text-align: center;
}
._1vsyzju2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
._1vsyzju3 {
  color: var(--affine-link-color);
  background: transparent;
  border-color: transparent;
  font-size: var(--affine-font-xs);
  line-height: 22px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1vsyzju4 {
  color: var(--affine-v2-text-link);
}
._1vsyzju5 {
  color: var(--affine-v2-text-link);
}
._1vsyzju6 {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 20px;
}
._1vsyzju7 {
  flex: 1;
  height: 0;
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
._1vsyzju8 {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
}
._1vsyzju9 {
  color: var(--affine-v2-text-primary);
  font-size: var(--affine-font-xs);
  font-weight: 500;
}
._1vsyzjua {
  color: var(--affine-v2-text-link);
  font-size: var(--affine-font-xs);
}
._1vsyzjub {
  color: var(--affine-v2-text-link);
}
._1vsyzjuc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
._1vsyzjud {
  background-color: var(--affine-v2-button-signinbutton-background);
}
._1vsyzjue {
  background-color: var(--affine-v2-button-signinbutton-background);
}
._2u2yya0 {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
._2u2yya1 {
  position: absolute;
  top: 128px;
  pointer-events: none;
}
._1587f5r0 {
  container-type: inline-size;
}
._1587f5r1 {
  --affine-editor-side-padding: 96px;
  min-height: 100%;
}
[data-full-width-layout="true"] ._1587f5r1 {
  --affine-editor-width: 100%;
  --affine-editor-side-padding: 72px;
}
._1587f5r2 {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  container-name: viewport;
  container-type: inline-size;
  background: var(--affine-v2-layer-background-primary);
}
._1rffh6h0 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1rffh6h1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
._1rffh6h2 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  border-radius: 10px;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--affine-white);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--affine-icon-color);
  transition: background 0.2s ease-in-out;
  z-index: 1;
  margin-top: 38px;
  margin-right: 38px;
}
._1rffh6h3 {
  color: var(--affine-white);
  position: absolute;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
  opacity: 0.2;
  padding: 0 15px;
  cursor: pointer;
}
._1rffh6h4 {
  display: flex;
  height: 100%;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
}
._1rffh6h5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
._1rffh6h6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1rffh6h7 {
  color: var(--affine-white);
  margin-top: 24px;
}
._1rffh6h8 {
  height: 36px;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 0.5px solid var(--affine-border-color);
  background-color: var(--affine-white);
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.14);
  box-sizing: content-box;
  color: var(--affine-icon-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1rffh6h9 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  min-width: 34px;
  padding: 1px 2px;
  font-size: 14px;
}
._1rffh6ha {
  height: 24px;
  padding: 1px 2px;
  min-width: 50px;
  font-size: 14px;
  color: var(--affine-icon-color) !important;
}
._1rffh6ha:hover {
  background-color: var(--affine-hover-color);
}
._1rffh6hb {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 28px;
  z-index: 2;
}
._1rffh6hc {
  max-width: 686px;
  color: var(--affine-white);
  background: rgba(0,0,0,0.75);
  padding: 10px;
  margin-bottom: 21px;
}
._1rffh6hd {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
@media screen and (max-width: 768px) {
  ._1rffh6h5 {
    align-items: center;
  }
  ._1rffh6h7 {
    text-align: center;
  }
}
.w4grr10 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}
.w4grr11 {
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: var(--affine-v2-centerPeek-buttonBackground);
}
@media screen and (width <= 640px) {
  .w4grr10 {
    flex-direction: row-reverse;
    width: 100%;
  }
  [data-action-name="close"].w4grr11 {
    margin-left: auto;
    order: 0;
  }
}
._1s46ujp0 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
._1s46ujp1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
._1s46ujp2 {
  background: var(--onix-background);
  position: relative;
  padding: 6px 8px 6px 12px;
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 1;
  border-bottom: 0.5px solid var(--onix-border);
  box-sizing: border-box;
  overflow: hidden;
}
._1s46ujp3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 2;
}
._1s46ujp4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: var(--onix-secondary);
  border-bottom: 0.5px solid var(--onix-border);
  gap: 8px;
  box-sizing: border-box;
}
._1s46ujp5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
  display: flex;
  align-items: center;
  gap: 6px;
}
._1s46ujp6 {
  display: flex;
  align-items: center;
  background-color: var(--onix-accent);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
._1s46ujp7 {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--onix-muted-foreground);
  background: transparent;
  border: none;
  transition: all 0.15s ease;
}
._1s46ujp7:hover {
  color: var(--onix-foreground);
}
._1s46ujp8 {
  background-color: var(--onix-background);
  color: var(--onix-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
._1s46ujp9 {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--onix-muted);
  color: var(--onix-muted-foreground);
}
._1s46ujpa {
  flex-grow: 1;
  height: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
._1s46ujpb {
  position: relative;
  padding: 44px 0 166px 0;
  height: 100%;
  display: flex;
  align-items: center;
}
._1s46ujpc {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
._1s46ujpd {
  font-weight: 600;
  font-size: 14px;
  color: var(--onix-muted-foreground);
}
._1s46ujpe {
  width: 44px;
  height: 44px;
  color: var(--onix-muted-foreground);
}
._1s46ujpf {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
._1g1e4to0 {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 300px;
  min-width: 120px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-app-region: no-drag;
}
._1g1e4to1 {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
._1g1e4to2 {
  padding: 0px 20px;
  cursor: grab;
  -webkit-app-region: no-drag;
  color: var(--onix-muted-foreground);
  transition: all 0.2s;
  gap: 2px;
}
._1g1e4to2:hover, ._1g1e4to2[data-active="true"], ._1g1e4to2[data-dragging="true"] {
  color: var(--onix-primary);
}
._1g1e4to2[data-dragging="true"] {
  gap: 3px;
}
._1g1e4to3 {
  padding: 3px 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  background-color: var(--onix-background);
  border-radius: 8px;
}
._1g1e4to4 {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: currentColor;
  transition: all 0.2s;
}
._1g1e4to2[data-dragging="true"] ._1g1e4to4:is([data-idx="0"], [data-idx="2"]) {
  width: 7px;
}
._1g1e4to2[data-dragging="true"] ._1g1e4to4[data-idx="1"] {
  width: 6px;
}
._1g1e4to5 {
  position: absolute;
  inset: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  transition: opacity 0.2s;
  opacity: 0;
}
._1g1e4to2[data-dragging="true"] ._1g1e4to5, ._1g1e4to2:hover ._1g1e4to5 {
  opacity: 1;
}
@keyframes _1959tev8 {
  from {
    --_1959tev2: 50px;
    --_1959tev5: 3px;
    --_1959tev6: 1;
    --_1959tev7: 10px;
  }
  to {
    --_1959tev2: 300px;
    --_1959tev5: 100%;
    --_1959tev6: 0.15;
    --_1959tev7: 4px;
  }
}
._1959tev9 {
  flex-shrink: 0;
  flex-grow: var(--_1959tev3, 1);
  position: relative;
  order: var(--_1959tev4);
  display: flex;
}
[data-is-resizing="true"]._1959tev9 {
  transition: none;
}
[data-is-reordering="true"]._1959tev9 {
  flex-grow: 1;
}
[data-client-border="false"] ._1959tev9[data-is-first="true"] {
  border-top-left-radius: var(--_1959tev1);
}
[data-client-border="false"] ._1959tev9:not([data-is-last="true"]):not([data-is-dragging="true"]) {
  border-right: 0.5px solid var(--onix-border);
}
[data-client-border="true"] ._1959tev9 {
  border: 0.5px solid var(--onix-border);
  border-top-left-radius: var(--_1959tev1);
  border-bottom-left-radius: var(--_1959tev1);
  border-top-right-radius: var(--_1959tev1);
  border-bottom-right-radius: var(--_1959tev1);
}
._1959teva {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: opacity 0.2s;
}
._1959teva::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-is-active="true"]._1959teva::after {
  box-shadow: inset 0 0 0 1px var(--onix-primary);
}
[data-is-dragging="true"] ._1959teva {
  opacity: 0.5;
}
._1959tevb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
._1959tevc {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--_1959tev2);
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
._1959tevc[data-can-resize="false"]:not([data-state="drop-indicator"]) {
  pointer-events: none;
}
._1959tevc[data-state="drop-indicator"] {
  --_1959tev2: 50px;
}
._1959tevc[data-edge="left"] {
  left: calc(var(--_1959tev2) * -0.5);
  right: auto;
}
._1959tevc[data-edge="right"] {
  left: auto;
  right: calc(var(--_1959tev2) * -0.5);
}
._1959tevc[data-edge="right"][data-is-last="true"] {
  right: 0;
  left: auto;
}
[data-client-border="false"] ._1959tevc[data-is-last="true"][data-edge="right"]::before, [data-client-border="false"] ._1959tevc[data-is-last="true"][data-edge="right"]::after {
  transform: translateX(calc(0.5 * var(--_1959tev2) - 1px));
}
._1959tevc[data-can-resize="true"] {
  cursor: col-resize;
}
[data-client-border="true"] ._1959tevc[data-edge="right"] {
  right: calc(var(--_1959tev2) * -0.5 - 0.5px - var(--_1959tev0) / 2);
}
._1959tev9[data-is-dragging="true"] ._1959tevc {
  display: none;
}
._1959tevc[data-state="drop-indicator"][data-dragging-over="true"] {
  --_1959tev6: 1;
  --_1959tev5: 3px;
  animation-name: _1959tev8;
  animation-duration: 0.5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
._1959tevc::before, ._1959tevc::after {
  content: "";
  width: var(--_1959tev5);
  position: absolute;
  height: 100%;
  transition: all 0.2s, transform 0s;
  border-radius: var(--_1959tev7);
}
._1959tevc::before {
  background: var(--onix-primary);
  opacity: var(--_1959tev6);
}
._1959tevc[data-state="resizing"]::before, ._1959tevc[data-state="resizing"]::after {
  --_1959tev5: 3px;
  --_1959tev6: 1;
}
._1959tevc[data-state="drop-indicator"][data-dragging-over="false"]::before {
  --_1959tev6: 0.5;
}
._1959tevc:is(:hover[data-can-resize="true"], [data-state="resizing"])::before {
  --_1959tev5: 3px;
  --_1959tev6: 1;
}
._1959tevc:is(:hover[data-can-resize="true"], [data-state="resizing"])::after {
  box-shadow: 0px 12px 21px 4px var(--onix-primary);
  opacity: 0.15;
}
._1959tevd {
  --_1959tev0: 0px;
  --_1959tev1: 6px;
  --_1959tev2: 10px;
  --_1959tev5: 2px;
  --_1959tev6: 0;
  --_1959tev7: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  border-radius: var(--_1959tev1);
  gap: var(--_1959tev0);
  padding: 0 10px;
  margin: 0 -10px;
}
._1959tevd[data-client-border="true"] {
  --_1959tev0: 8px;
}
._1959tevd:has(._1959tevc[data-dragging-over="true"]) {
  overflow: clip;
}
._1959teve {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._2iz0so0 {
  display: flex;
  height: 100%;
  flex: 1;
}
._2iz0so1 {
  flex: 1;
  overflow: hidden;
  height: 100%;
}
._2iz0so2 {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  right: 0;
}
._2iz0so2[data-client-border=true] {
  padding-left: 8px;
  border-radius: 6px;
}
._2iz0so2[data-client-border=false] {
  border-left: 0.5px solid var(--onix-border);
}
._1e6jcic0 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1e6jcic1 {
  width: 280px;
  padding-right: 0;
}
._1e6jcic2 {
  padding-right: 8px;
  max-height: 360px;
}
._1e6jcic3 {
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
}
._1e6jcic4 {
  pointer-events: none;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  padding: 4px;
}
._1e6jcic5 {
  color: var(--affine-v2-text-secondary);
}
._1e6jcic6 {
  line-height: 0;
  pointer-events: auto;
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
}
._1e6jcic7 {
  width: 0;
  flex: 1;
}
._1e1agwt0 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-width: 0;
  background: var(--onix-card);
}
._1e1agwt0:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1e1agwt1 {
  width: auto;
  padding: 7px;
}
._1e1agwt2 {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--onix-muted-foreground);
}
._1e1agwt3 {
  width: 280px;
}
.o6fo800 {
  --svg-dot-animation: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 122 116%27%3E%3Cpath id=%27b%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-width=%270%27 d=%27M17.9256 115C17.434 111.774 13.1701 104.086 13.4282 95.6465C13.6862 87.207 18.6628 76.0721 17.9256 64.3628C17.1883 52.6535 8.7772 35.9512 9.00452 25.3907C9.23185 14.8302 16.2114 5.06512 17.9256 1%27/%3E%3Cpath id=%27d%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-width=%270%27 d=%27M84.1628 115C85.2376 112.055 94.5618 98.8394 93.9975 91.1338C93.4332 83.4281 82.5505 73.2615 84.1628 62.5704C85.775 51.8793 96.4803 35.4248 95.9832 25.7826C95.4861 16.1404 87.9113 4.71163 84.1628 1%27/%3E%3Cpath id=%27f%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-width=%270%27 d=%27M37.0913 115C37.9604 111.921 44.4347 99.4545 45.3816 92.9773C48.9305 68.7011 35.7877 73.9552 37.0913 62.7781C38.3949 51.6011 47.3889 36.9895 46.9869 26.9091C46.585 16.8286 40.1222 4.88034 37.0913 1%27/%3E%3Cpath id=%27h%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-width=%270%27 d=%27M112.443 115C111.698 112.235 108.25 106.542 107.715 93.7582C107.241 82.4286 107.229 83.9543 112.443 66.1429C116.085 44.0408 100.661 42.5908 101.006 33.539C101.35 24.4871 109.843 4.48439 112.443 1%27/%3E%3Cg%3E%3Ccircle r=%271.5%27 fill=%27rgba%2830, 150, 235, 0.3%29%27%3E%3CanimateMotion dur=%2710s%27 repeatCount=%27indefinite%27%3E%3Cmpath href=%27%23b%27 /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r=%271%27 fill=%27rgba%2830, 150, 235, 0.3%29%27 fill-opacity=%271%27 shape-rendering=%27crispEdges%27%3E%3CanimateMotion dur=%278s%27 repeatCount=%27indefinite%27%3E%3Cmpath href=%27%23d%27 /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r=%27.5%27 fill=%27rgba%2830, 150, 235, 0.3%29%27 fill-opacity=%271%27 shape-rendering=%27crispEdges%27%3E%3CanimateMotion dur=%274s%27 repeatCount=%27indefinite%27%3E%3Cmpath href=%27%23f%27 /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r=%27.8%27 fill=%27rgba%2830, 150, 235, 0.3%29%27 fill-opacity=%271%27 shape-rendering=%27crispEdges%27%3E%3CanimateMotion dur=%276s%27 repeatCount=%27indefinite%27%3E%3Cmpath href=%27%23h%27 /%3E%3C/animateMotion%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  display: inline-flex;
  background: var(--onix-card);
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  font-size: 14px;
  width: 100%;
  height: 52px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 0 12px;
  position: relative;
  transition: all 0.3s ease;
}
.o6fo800:hover {
  background: var(--onix-secondary);
}
.o6fo800:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.o6fo800[data-disabled="true"] {
  pointer-events: none;
  opacity: 1;
}
.o6fo800:after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--onix-primary);
  border-radius: 50%;
  z-index: 1;
  transition: opacity 0.3s;
}
.o6fo800:hover:after {
  opacity: 0;
}
.o6fo801 {
  margin-right: 12px;
  color: var(--onix-muted-foreground);
  font-size: 24px;
}
.o6fo802 {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
  color: var(--onix-muted-foreground);
  background-color: var(--onix-background);
  font-size: 14px;
  cursor: pointer;
  transition: 0.1s;
  border-radius: 50%;
  transform: scale(0.6);
  z-index: 1;
  opacity: 0;
}
.o6fo802:hover {
  transform: scale(1.1);
}
.o6fo800:hover .o6fo802 {
  opacity: 1;
  transform: scale(1);
}
.o6fo803 {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  justify-content: space-between;
}
.o6fo804 {
  justify-content: flex-start;
}
.o6fo800:hover .o6fo804, .o6fo800[data-updating=true] .o6fo804 {
  display: none;
}
.o6fo805 {
  display: none;
  justify-content: flex-start;
}
.o6fo800:hover .o6fo805, .o6fo800[data-updating=true] .o6fo805 {
  display: flex;
}
.o6fo806 {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 0;
}
.o6fo807 {
  padding: 0 6px;
  color: var(--onix-muted-foreground);
  background: var(--onix-background);
  font-size: 10px;
  line-height: 18px;
  border-radius: 4px;
  margin-left: 8px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o6fo808 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  white-space: nowrap;
}
.o6fo809 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o6fo80a {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 12px;
  background: var(--onix-border);
}
.o6fo80b {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 12px;
  background: var(--onix-primary);
  transition: 0.1s;
}
.o6fo80c {
  background: var(--svg-dot-animation), var(--svg-dot-animation);
  background-repeat: no-repeat, repeat;
  background-position: center, center top 100%;
  background-size: 100%, 130%;
  -webkit-mask-image: linear-gradient(to top, transparent, black, black, transparent);
          mask-image: linear-gradient(to top, transparent, black, black, transparent);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  pointer-events: none;
  display: none;
}
.o6fo800:hover .o6fo80c, .o6fo800[data-updating=true] .o6fo80c {
  display: block;
}
.o6fo80c:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--svg-dot-animation), var(--svg-dot-animation), var(--svg-dot-animation);
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, center top 100%, center center;
  background-size: 100% 120%, 150%, 120%;
  filter: blur(1px);
  will-change: filter;
  pointer-events: none;
}
.o6fo80d {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
.o6fo80d:before {
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  filter: blur(10px) saturate(1.2);
  transition: 0.3s ease;
  will-change: filter, transform;
  transform: translateY(100%) scale(0.6);
  background: radial-gradient(ellipse 60% 80% at bottom, rgba(30, 150, 235, 0.35), transparent);
}
.o6fo80d:after {
  content: "";
  display: block;
  inset: 0;
  position: absolute;
  filter: blur(10px) saturate(1.2);
  transition: 0.1s ease;
  will-change: filter, transform;
  transform: translateY(100%) scale(0.6);
  background: radial-gradient(ellipse 30% 45% at bottom, rgba(30, 150, 235, 0.6), transparent);
}
.o6fo800:hover .o6fo80d:before, .o6fo800:hover .o6fo80d:after,
  .o6fo800[data-updating=true] .o6fo80d:before, .o6fo800[data-updating=true] .o6fo80d:after {
  transform: translateY(0) scale(1);
}
.ulheqq0 {
  padding: 0 24px;
}
.ulheqq1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  white-space: nowrap;
}
._8i4cgo0 {
  display: flex;
  gap: 8px;
  opacity: 0;
}
._8i4cgo1 {
  font-size: 12px;
  height: 20px;
  width: calc(100%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  border-radius: 4px;
}
._8i4cgo1[data-collapsible="true"] {
  cursor: pointer;
}
._8i4cgo1[data-collapsible="true"]:hover {
  background-color: var(--onix-accent);
}
._8i4cgo1[data-collapsible="true"]:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._8i4cgo1[data-collapsible="true"]:hover:has(._8i4cgo0:hover) {
  background-color: transparent;
}
._8i4cgo1:hover ._8i4cgo2 {
  opacity: 1;
}
._8i4cgo3 {
  color: var(--onix-muted-foreground);
  font-weight: 500;
  line-height: 20px;
  flex-grow: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: start;
  cursor: pointer;
}
._8i4cgo4 {
  --y: 1px;
  --r: 90deg;
  color: var(--onix-muted-foreground);
  transform: translateY(var(--y)) rotate(var(--r));
  transition: transform 0.2s;
}
._8i4cgo1[data-collapsed="true"] ._8i4cgo4 {
  --r: 0deg;
}
.cjniga0 {
  color: inherit;
}
.cjniga1 {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  text-align: left;
  color: inherit;
  width: 100%;
  min-height: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 0 2px 0 0;
  font-size: 14px;
  margin-top: 4px;
  position: relative;
}
.cjniga1:hover {
  background: var(--onix-accent);
}
.cjniga1:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.cjniga1[data-active="true"] {
  background: var(--onix-accent);
}
.cjniga1[data-disabled="true"] {
  cursor: default;
  color: var(--onix-muted-foreground);
  pointer-events: none;
}
.cjniga1[data-collapsible="true"] {
  padding-left: 4px;
  padding-right: 4px;
}
.cjniga1[data-collapsible="false"]:is([data-active="true"], :hover) {
  width: calc(100% + 8px + 8px);
  transform: translateX(-8px);
  padding-left: 8px;
  padding-right: 10px;
}
.cjniga0:first-of-type .cjniga1 {
  margin-top: 0px;
}
.cjniga2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cjniga3 {
  right: 4px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cjniga1:hover .cjniga3, .cjniga3[data-postfix-display="always"] {
  justify-self: flex-end;
  position: initial;
  opacity: 1;
  pointer-events: all;
}
.cjniga4 {
  color: var(--onix-muted-foreground);
  font-size: 20px;
}
.cjniga5 {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: inherit;
}
.cjniga5[data-collapsed="true"] {
  transform: rotate(-90deg);
}
.cjniga5[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
.cjniga5:hover {
  background: var(--onix-accent);
}
.cjniga5:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.cjniga6 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  flex-shrink: 0;
}
.cjniga6[data-collapsible="true"] {
  width: 44px;
}
.cjniga7 {
  transition: transform 0.2s ease-in-out;
}
.cjniga7[data-collapsed="true"] {
  transform: rotate(-90deg);
}
.cjniga8 {
  flex: 1;
}
._1qe57670 {
  background: var(--onix-background);
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  cursor: default;
  padding: 12px 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
  display: flex;
  gap: 8px;
  position: fixed;
  bottom: 16px;
  left: calc(50dvw - 220px);
  width: 440px;
  z-index: var(--onix-z-popover);
  transition: transform 0.2s ease-in-out;
}
._1qe57670[data-hidden="true"] {
  transform: translateY(200%);
}
._1qe57671 {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
._1qe57671:not(:last-of-type) {
  border-bottom: 1px solid var(--onix-border);
}
._1qe57672 {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
._1qe57673 {
  height: 26px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
}
._1qe57674 {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--onix-foreground);
  font-weight: 500;
}
._1qe57675 {
  font-size: 12px;
  color: var(--onix-foreground);
  margin-top: 4px;
}
._1qe57676 {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
._1qe57677 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
}
._1qe57678 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--onix-muted-foreground);
}
._1qe57679 {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 24px;
}
._1qe5767a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}
._1qe5767b {
  display: flex;
  justify-content: flex-start;
}
._1qe5767c {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
._1qe5767d {
  flex: 1;
}
._1qe5767e {
  color: var(--onix-primary);
  text-decoration: underline;
}
.qanbx00 {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  height: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 0 12px 0 8px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.qanbx00:hover {
  background: var(--onix-accent);
}
.qanbx00:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.qanbx01 {
  margin-right: 12px;
  color: var(--onix-muted-foreground);
  font-size: 20px;
}
.qanbx02 {
  flex: 1;
}
.qanbx03 {
  color: var(--onix-muted-foreground);
  font-size: 15px;
}
.qanbx04 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swazov0 {
  padding: 4px 14px;
  display: flex;
  flex-flow: column nowrap;
}
.swazov0:empty {
  display: none;
}
.swazov1 {
  --scrollbar-width: 10px;
  flex: 1 1 auto;
  overflow-y: hidden;
}
.swazov2 {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  transition: opacity .3s .2s;
  opacity: 0;
  background: var(--onix-border);
}
.swazov2[data-has-scroll-top="true"] {
  opacity: 1;
}
.swazov3 {
  height: 100%;
  margin-top: 4px;
  padding-bottom: 8px;
}
.swazov3 > div {
  max-width: 100%;
  display: block !important;
}
.swazov4 {
  height: 100%;
  padding: 0px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.swazov5 {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  padding: 0 2px;
  width: var(--scrollbar-width);
  height: 100%;
  opacity: 1;
  transition: opacity .15s;
}
.swazov5[data-state="hidden"] {
  opacity: 0;
}
.swazov6 {
  position: relative;
  background: var(--onix-muted-foreground);
  border-radius: 4px;
  overflow: hidden;
}
.swazov6::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}
._1xay880 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 16px 6px 11px;
  gap: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  font-size: 24px;
}
._1xay881 {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--affine-v2-icon-secondary);
}
._1xay882 {
  font-size: var(--affine-font-sm);
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arnom30 {
  display: flex;
  flex-direction: column;
}
.arnom31 {
  padding: 10px 8px 0px 8px;
}
.arnom32 {
  padding: 0px 8px 10px 8px;
}
.arnom33 {
  width: 9px;
  padding: 0px 2px;
}
.arnom33:hover {
  padding: 0;
}
.arnom34 {
  width: 5px;
}
.arnom35 {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
}
.arnom36 {
  width: 28px;
  padding: 2px 4px 4px;
  border-radius: 14px;
  background: var(--affine-white);
  display: flex;
  border: 1px solid var(--affine-icon-secondary);
  color: var(--affine-icon-secondary);
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.arnom37 {
  display: flex;
  flex-direction: column;
}
.arnom38 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arnom39 {
  font-size: var(--affine-font-xs);
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-text-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arnom3a {
  border-radius: 8px;
}
.arnom3b {
  height: 42px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1e23yq90 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  outline: none;
  width: 100%;
  max-width: 500px;
  color: var(--affine-v2-text-primary);
  overflow: hidden;
}
._1e23yq90:hover {
  cursor: pointer;
  background: var(--affine-hover-color);
}
._1e23yq91 {
  width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
._1e23yq92 {
  flex-shrink: 0;
  line-height: 0;
}
._1e23yq93 {
  pointer-events: none;
  opacity: 0.8;
}
._1e23yq93:hover {
  cursor: default;
  background: none;
}
._1e23yq94 {
  --h: 42px;
  height: var(--h);
  overflow: hidden;
}
._1e23yq94[data-dense="true"] {
  --h: 22px;
}
._1e23yq95 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(.45,.21,0,1) 0s;
}
._1e23yq94[data-active="true"] ._1e23yq95 {
  transform: translateY(calc(var(--h) * -1));
}
._1e23yq96 {
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._1e23yq97 {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  height: var(--h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.5s cubic-bezier(.45,.21,0,1) 0s;
}
._1e23yq94[data-active="true"] ._1e23yq97[data-type="normal"] {
  opacity: 0;
}
._1e23yq94[data-active="false"] ._1e23yq97[data-type="events"] {
  opacity: 0;
}
._1e23yq98 {
  font-size: var(--affine-font-sm);
  line-height: 22px;
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
}
._1e23yq99 {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-black-50);
}
._1e23yq99 svg {
  width: 16px;
  height: 16px;
  color: var(--affine-icon-secondary);
}
._1e23yq9a {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  color: var(--affine-text-secondary-color);
}
._1e23yq9a svg {
  width: 16px;
  height: 16px;
  color: var(--affine-icon-secondary);
  display: block;
}
._1e23yq9b {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  padding: 0 8px;
  min-height: 20px;
}
._1e23yq9c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}
._1e23yq9d {
  opacity: 0;
}
._1e23yq90:hover ._1e23yq9d {
  opacity: 1;
}
._1e23yq9e {
  color: var(--affine-v2-icon-secondary);
  font-size: 14px;
}
._1e23yq9f {
  transition: all 0.13s ease;
  width: 0;
  height: 20px;
  overflow: hidden;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  color: var(--affine-v2-icon-primary);
  border-radius: 4px;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
._1e23yq90:hover ._1e23yq9f {
  width: 20px;
  box-shadow: var(--affine-button-shadow);
  background: var(--affine-v2-button-secondary);
}
._1e23yq9g {
  position: absolute;
  right: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
._1e23yq90:hover ._1e23yq9g {
  position: relative;
}
._1e23yq9g:empty {
  display: none;
}
._1e23yq9h {
  font-size: 14px;
  color: var(--affine-v2-icon-activated);
}
._1e23yq9i {
  display: flex;
  gap: 8px;
  align-items: center;
}
._1e23yq9i:empty {
  display: none;
}
.qiik9o0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px;
  gap: 8px;
  margin-bottom: 6px;
}
.qiik9o1 {
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 4px;
  color: var(--affine-v2-icon-primary);
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qiik9o2 {
  display: flex;
  flex-direction: column;
}
.qiik9o3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.qiik9o4 {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  margin-top: -1.5px;
}
.qiik9o5 {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.qiik9o5:has(~ .qiik9o4) {
  margin-bottom: -1.5px;
}
.qiik9o6 {
  color: var(--affine-v2-icon-secondary);
}
.qiik9o7 {
  width: 0;
  flex-grow: 1;
}
.qiik9o8 {
  height: 36px;
  padding: 7px 12px;
}
.qiik9o9 {
  gap: 12px;
}
.qiik9oa {
  margin-top: 8px;
  margin-bottom: 12px;
}
.qiik9ob {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 4px;
}
.qiik9oc {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--affine-v2-tab-divider-divider);
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qiik9od {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.iddao70 {
  padding: 4px 8px;
  height: 100%;
  overflow: clip;
}
.iddao71 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  overflow: hidden;
  height: 42px;
}
.iddao72 {
  flex: 1;
}
.iddao73 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-top: 42px;
}
.iddao74 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iddao75 {
  transform: translateX(-10px);
}
.okhom31 {
  padding-top: 6px;
}
.okhom32[data-dragged-over="true"] {
  background: var(--onix-accent);
}
.eap3ar0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--onix-foreground);
}
.eap3ar0:hover {
  background-color: var(--onix-accent);
}
.eap3ar0:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
.eap3ar1 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: var(--onix-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eap3ar1:hover {
  background-color: var(--onix-accent);
  color: var(--onix-foreground);
}
.eap3ar1:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
._1kd2uyd0 {
  z-index: 99999;
  position: fixed;
  left: 10px;
  top: -20px;
  background: var(--onix-background);
  box-shadow: 0px 6px 16px #00000024;
  padding: 0px 4px;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
._1kd2uyd1 {
  width: 12px;
  height: 12px;
}
@keyframes _1cbzwpfc {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._1cbzwpf1 {
  color: inherit;
}
._1cbzwpf1:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1cbzwpf2 {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  text-align: left;
  color: inherit;
  width: 100%;
  min-height: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 0 6px;
  font-size: 14px;
  position: relative;
  margin-top: 0px;
}
._1cbzwpf2:hover {
  background: var(--onix-accent);
}
._1cbzwpf2:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1cbzwpf2[data-active="true"] {
  background: var(--onix-accent);
}
._1cbzwpf2[data-disabled="true"] {
  cursor: default;
  color: var(--onix-muted-foreground);
  pointer-events: none;
}
._1cbzwpf2[data-dragging="true"] {
  opacity: 0.5;
}
._1cbzwpf3 {
  display: flex;
  align-items: center;
  width: 0;
  flex: 1;
  position: relative;
  gap: 12px;
}
._1cbzwpf4 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
._1cbzwpf5 {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: -10px;
  width: 10px;
  height: 10px;
}
._1cbzwpf6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  flex: 1;
  color: var(--onix-foreground);
  line-height: calc(1em + 8px);
}
._1cbzwpf7 {
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
._1cbzwpf2:hover ._1cbzwpf7 {
  opacity: 1;
  pointer-events: initial;
  position: initial;
}
._1cbzwpf8 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: var(--onix-muted-foreground);
  font-size: 20px;
  position: absolute;
}
._1cbzwpf2[data-collapsible="true"]:hover ._1cbzwpf8 {
  opacity: 0;
  pointer-events: none;
}
._1cbzwpf9 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: var(--onix-muted-foreground);
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
._1cbzwpf9[data-collapsed="true"] {
  transform: rotate(-90deg);
}
._1cbzwpf9[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
._1cbzwpf9:hover {
  background: var(--onix-accent);
}
._1cbzwpf9:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1cbzwpf2[data-collapsible="true"]:hover ._1cbzwpf9 {
  opacity: 1;
  pointer-events: initial;
}
._1cbzwpfa {
  transition: transform 0.2s ease-in-out;
  font-size: 16px;
}
._1cbzwpfa[data-collapsed="true"] {
  transform: rotate(-90deg);
}
._1cbzwpfb {
  display: none;
}
._1cbzwpfb:only-child {
  display: initial;
}
._1cbzwpfd {
  margin-top: 2px;
  padding-left: var(--_1cbzwpf0);
  position: relative;
}
._1cbzwpfe {
  background: var(--onix-background);
  width: 200px;
  border-radius: 6px;
}
._1cbzwpff {
  position: relative;
}
._1cbzwpff[data-tree-instruction="make-child"][data-self-dragged-over="false"]:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: var(--onix-accent);
  left: var(--_1cbzwpf0);
  top: 0;
  width: calc(100% - var(--_1cbzwpf0));
  height: 100%;
}
._1cbzwpff[data-tree-instruction="make-child"][data-self-dragged-over="false"][data-open="false"]:after {
  animation: _1cbzwpfc 1s infinite linear;
}
._1s2h35x0 {
  display: none;
}
._1s2h35x0:only-child {
  display: initial;
}
.r92zao0 {
  font-size: 14px;
  color: var(--onix-muted-foreground);
  text-align: left;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 22px;
  padding: 4px 0px;
  margin-top: 2px;
  padding-left: calc(var(--_1cbzwpf0, 20px) + 48px);
}
.r92zao0[data-dragged-over="true"] {
  background: var(--onix-accent);
  border-radius: 4px;
}
._1hey95y0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._4hpy810 {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 4px 8px 4px 8px;
  margin: 1px 4px;
  border-radius: 6px;
  gap: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
._4hpy810[data-clickable="true"] {
  cursor: pointer;
}
._4hpy810[data-clickable="true"]:hover {
  background-color: var(--onix-accent);
}
._4hpy810[data-dragged-over="true"] {
  background-color: var(--onix-accent);
  outline: 1px dashed var(--onix-primary);
  outline-offset: -1px;
}
._4hpy811 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
._4hpy812 {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
._4hpy813 {
  width: 14px;
  height: 14px;
  font-size: 14px;
  color: var(--onix-muted-foreground);
}
._4hpy814 {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._4hpy815 {
  flex-shrink: 0;
  gap: 3px;
  cursor: pointer;
}
._4hpy816 {
  width: 10px;
  height: 10px;
  font-size: 10px;
  flex-shrink: 0;
}
.rjnt710 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  line-height: 20px;
}
.rzx2sh0 {
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
.rzx2sh1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}
._1n4gtsy0[data-dragged-over="true"] {
  background: var(--onix-accent);
  border-radius: 4px;
}
._1p429580 {
  position: relative;
}
._1p429580[data-collapsed="false"]:after {
  content: "";
  display: block;
  position: absolute;
  left: -8px;
  top: 0;
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(30deg, #F5CC47, #F5CC47 8px, #000000 8px, #000000 14px);
}
._1p429581 {
  font-weight: bold;
}
._171ntoi0[data-dragged-over="true"] {
  background: var(--onix-accent);
  border-radius: 4px;
}
._171ntoi1 {
  display: flex;
  position: relative;
}
._171ntoi2 {
  top: 20px;
  left: auto;
  right: 0;
  transform: translateX(6px);
}
._1wx2o620 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% + 12px);
  height: 42px;
  padding-right: 6px;
  align-self: center;
}
._1wx2o621 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin-left: -8px;
  margin-right: -6px;
}
._1wx2o622 {
  width: 0;
  flex: 1;
}
._1wx2o623 {
  width: 0;
  flex: 1;
}
._1wx2o624 {
  gap: 8px;
}
._10yh0s90 {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
._14oaoke1 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
._14oaoke2 {
  padding: 4px 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
._14oaoke3 {
  flex-grow: 1;
  min-width: 0;
  max-width: 220px;
}
._14oaoke4 {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px;
}
._14oaoke5 {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  height: 20px;
}
._14oaoke6 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 4px;
}
._14oaoke7 {
  padding: 0px 6px 12px;
  cursor: pointer;
}
._14oaoke8 {
  padding: 0px 6px 12px;
}
._14oaoke9 {
  font-weight: 400;
  line-height: 20px;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._14oaokea {
  color: var(--onix-foreground);
  margin-right: 0.5em;
}
._14oaokeb {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  min-width: 260px;
}
._14oaokeb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--onix-accent);
}
._14oaokec {
  height: 100%;
  border-radius: inherit;
  background-color: var(--_14oaoke0);
}
._14oaoked {
  height: 16px;
  padding: 0px 4px;
  border-radius: 2px;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  color: var(--onix-primary-foreground);
  background: var(--onix-primary);
}
._14oaokee {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
}
._14oaokee:hover {
  background-color: var(--onix-accent);
}
._14oaokee:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._14oaokef {
  display: flex;
  align-items: center;
}
._14oaokeg {
  border-radius: 4px;
  border: 1px solid var(--onix-popover);
}
._14oaokeg.multi-avatar {
  margin-left: -4px;
}
._14oaokeh {
  flex: 1;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
  line-height: 20px;
}
._14oaokei {
  margin-left: auto;
  margin-right: 0px;
  padding: 0px 4px;
  border-radius: 2px;
  font-size: 10px;
  color: var(--onix-primary-foreground);
  background: var(--onix-primary);
  height: 16px;
  line-height: 16px;
}
._1m8zvi50 {
  display: flex;
  font-size: 10px;
  height: 16px;
  font-weight: 400;
  cursor: pointer;
  color: var(--affine-v2-button-pureWhiteText);
  background-color: var(--affine-v2-badge-free);
  padding: 0 4px;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
}
._1m8zvi50[data-is-believer="true"] {
  background-color: var(--affine-v2-badge-believer);
}
._1m8zvi50[data-is-pro="true"] {
  background-color: var(--affine-v2-badge-pro);
}
._1se910x0 {
  display: flex;
  flex: 1;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
._1se910x1 {
  min-height: 32px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
._1se910x1.left {
  justify-content: left;
}
._1se910x1.right {
  justify-content: right;
}
._1se910x2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  flex-shrink: 0;
  max-width: 60%;
  min-width: 300px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  z-index: 1;
}
._1se910x3 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
._1se910x3.right {
  flex-direction: row-reverse;
}
._1se910x4 {
  display: flex;
  flex-shrink: 0;
}
._1se910x5 {
  -webkit-app-region: no-drag;
  cursor: pointer;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  color: var(--onix-foreground, currentColor);
}
._1se910x5[data-type="close"]:hover {
  background: var(--affine-windows-close-button, #e81123);
  color: var(--onix-primary-foreground, #ffffff);
}
._1se910x5:hover {
  background: var(--onix-accent, rgba(128, 128, 128, 0.15));
}
._1se910x5:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 1px;
}
._1se910x6 {
  height: 20px;
  width: 1px;
  background: var(--onix-border);
}
@media print {
  ._1se910x0 {
    display: none;
  }
}
._1tegw5t3 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  overflow: clip;
  pointer-events: auto;
  -webkit-app-region: drag;
}
._1tegw5t3[data-is-windows="false"] {
  padding-right: 8px;
}
._1tegw5t4 {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-right: 12px;
  gap: 10px;
  flex-shrink: 0;
}
._1tegw5t3[data-mode="app"] ._1tegw5t4 {
  transition: all 0.3s;
}
._1tegw5t5 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
  overflow: hidden;
  height: 100%;
}
._1tegw5t5[data-pinned="true"] {
  flex-shrink: 0;
}
._1tegw5t6 {
  background: var(--onix-border);
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
}
._1tegw5t7 {
  background: var(--onix-border);
  width: 1px;
  height: 100%;
  flex-shrink: 0;
}
._1tegw5t8 {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 6px;
  margin: 0 -6px;
}
._1tegw5t9 {
  height: 26px;
  min-width: 32px;
  max-width: var(--_1tegw5t2);
  width: 200px;
  overflow: clip;
  background: var(--onix-secondary);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--onix-muted-foreground);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 4px;
  position: relative;
  -webkit-app-region: no-drag;
}
._1tegw5t8 ._1tegw5t9 {
  margin-right: 8px;
}
._1tegw5t9[data-active="true"] {
  box-shadow: 0 0 0 1px var(--onix-border);
}
._1tegw5t8[data-dragging="true"] ._1tegw5t9 {
  box-shadow: 0 0 0 1px var(--onix-primary);
}
._1tegw5ta {
  min-width: 48px;
  padding: 0 8px;
  height: 100%;
  display: flex;
  gap: 4px;
  font-weight: 500;
  align-items: center;
  justify-content: flex-start;
  cursor: default;
  flex: 1;
}
._1tegw5ta:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1tegw5ta[data-active="true"] {
  background: var(--onix-background);
}
._1tegw5tb {
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 14px;
  overflow: clip;
  display: flex;
  align-items: center;
  padding-right: 6px;
  justify-content: flex-end;
}
._1tegw5t9:is([data-active=true], :hover) ._1tegw5tb:not(:empty) {
  width: 48px;
}
._1tegw5ta:last-of-type[data-active=true] + ._1tegw5tb {
  background: linear-gradient(270deg, var(--onix-background) 50%, rgba(255, 255, 255, 0.00) 100%);
}
._1tegw5ta:last-of-type[data-active=false] + ._1tegw5tb {
  background: linear-gradient(270deg, var(--onix-secondary) 65.71%, rgba(244, 244, 245, 0.00) 100%);
}
._1tegw5tc {
  color: var(--onix-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}
._1tegw5td {
  width: 16px;
  height: 16px;
  font-size: 16px;
  flex-shrink: 0;
}
._1tegw5ta[data-active=true] ._1tegw5td {
  color: var(--onix-foreground);
}
._1tegw5ta[data-active=false]:hover ._1tegw5td, ._1tegw5t9:has(._1tegw5tb:hover) ._1tegw5ta:last-of-type ._1tegw5td {
  color: var(--onix-foreground);
}
._1tegw5te {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: none;
  color: var(--onix-muted-foreground);
}
._1tegw5te:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1tegw5t9:is([data-active=true], :hover) ._1tegw5te {
  display: flex;
}
._1tegw5te:hover {
  color: var(--onix-foreground);
  background: var(--onix-accent);
}
._1tegw5tf {
  min-width: 0;
  text-overflow: ellipsis;
  overflow: clip;
  white-space: nowrap;
  color: var(--onix-muted-foreground);
  font-size: 12px;
  padding-right: 4px;
}
._1tegw5ta:hover ._1tegw5tf, ._1tegw5t9:has(._1tegw5tb:hover) ._1tegw5ta:last-of-type ._1tegw5tf {
  color: var(--onix-foreground);
}
._1tegw5ta[data-active="true"] ._1tegw5tf {
  color: var(--onix-foreground);
}
._1tegw5ta:last-of-type ._1tegw5tf {
  text-overflow: clip;
}
._1tegw5ta:last-of-type [data-padding-right="true"]._1tegw5tf {
  padding-right: 32px;
}
._1tegw5tg {
  flex-grow: 1;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: -8px;
  position: relative;
}
._1tegw5tg[data-dragged-over=true]:after {
  content: "";
  position: absolute;
  top: 10px;
  height: 32px;
  left: -5px;
  right: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--onix-primary);
}
._1tegw5th {
  width: 120px;
  height: 100%;
  flex-shrink: 0;
}
._1tegw5ti {
  position: absolute;
  height: 32px;
  top: 10px;
  width: 2px;
  border-radius: 2px;
  opacity: 0;
  background: var(--onix-primary);
}
._1tegw5ti[data-edge="left"] {
  opacity: 1;
  transform: translateX(-5px);
}
._1tegw5ti[data-edge="right"] {
  right: 0;
  opacity: 1;
  transform: translateX(-9px);
}
._1tegw5tj {
  -webkit-app-region: no-drag;
  flex-shrink: 0;
  cursor: pointer;
}
@keyframes _1jqtggzc {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._1jqtggz0 {
  max-height: 448px;
  width: 360px;
  display: flex;
  flex-direction: column;
}
._1jqtggz0[data-mobile] {
  width: 100%;
}
._1jqtggz1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
._1jqtggz2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
._1jqtggz3 {
  flex: 1;
  padding: 8px 0px ;
}
._1jqtggz4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1jqtggz5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 184px;
  padding: 16px 45px;
}
._1jqtggz6 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 50%;
  background-color: var(--affine-v2-layer-background-secondary);
  color: var(--affine-v2-icon-primary);
}
._1jqtggz7 {
  color: var(--affine-v2-text-primary);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
._1jqtggz8 {
  color: var(--affine-v2-text-secondary);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
._1jqtggz9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--affine-v2-status-error);
  font-size: 14px;
  line-height: 22px;
  padding: 8px;
}
._1jqtggza {
  color: var(--affine-v2-status-error);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
._1jqtggzb {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  position: relative;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
}
._1jqtggzb:hover:not([data-disabled="true"],:has(button:hover)) {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1jqtggzd {
  opacity: 0;
  animation: _1jqtggzc 500ms ease forwards 1s;
}
._1jqtggze {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  background-color: var(--affine-v2-button-iconButtonSolid);
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  box-shadow: var(--affine-button-shadow);
  opacity: 0;
}
._1jqtggzb:hover ._1jqtggze {
  opacity: 1;
}
._1jqtggzf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
}
._1jqtggzg {
  color: var(--affine-v2-text-secondary);
  font-size: 12px;
  line-height: 20px;
}
._1jqtggzh {
  color: var(--affine-v2-text-placeholder);
  font-size: 12px;
  line-height: 22px;
}
._1jqtggzi {
  font-weight: 500;
  color: var(--affine-v2-text-primary);
  display: inline;
  vertical-align: top;
}
._1jqtggzi[data-inactived="true"] {
  color: var(--affine-v2-text-placeholder);
}
._1jqtggzj {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 4px;
}
._1jqtggzk {
  vertical-align: top;
  margin-right: 4px;
  color: var(--affine-v2-icon-primary);
}
._1jqtggzl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: var(--affine-v2-text-secondary);
}
._1939et40 {
  width: 100%;
  position: relative;
  height: 100dvh;
  flex-grow: 1;
  display: flex;
  background-color: var(--onix-background);
}
._1939et40.blur-background {
  background-color: transparent;
}
._1939et40.noisy-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--onix-noise-opacity, 0);
  background-repeat: repeat;
  background-size: 50px;
  background-image: var(--noise-background);
}
html[data-theme="light"] ._1939et40 {
  --onix-noise-opacity: 0.2;
}
html[data-theme="dark"] ._1939et40 {
  --onix-noise-opacity: 1;
}
._1939et41 {
  display: flex;
  flex-flow: row;
  height: 100%;
  width: 100%;
  position: relative;
}
._1939et42 {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}
._1939et43 {
  display: flex;
  flex-flow: row;
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
}
._1939et44 {
  display: flex;
  flex-flow: row;
  align-items: center;
  height: 40px;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
._1939et45 {
  position: relative;
  z-index: 0;
  width: 100%;
  display: flex;
  flex: 1;
  max-width: 100%;
}
._1939et45[data-client-border="true"] {
  border-radius: 6px;
  padding: 8px;
}
._1939et45[data-client-border="true"][data-side-bar-open="true"] {
  padding-left: 0;
}
._1939et45[data-client-border="true"][data-is-desktop="true"] {
  padding-top: 0;
}
._1939et45[data-client-border="false"][data-is-desktop="true"][data-side-bar-open="true"] {
  border-top-left-radius: 6px;
}
._1939et45[data-client-border="false"][data-is-desktop="true"] {
  border-top: 0.5px solid var(--onix-border);
  border-left: 0.5px solid var(--onix-border);
}
._1939et45[data-transparent=true] {
  background-color: transparent;
}
@media print {
  html[data-theme="dark"] ._1939et40 {
    --affine-font-family: 'Inter', 'Source Sans 3', Poppins, apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-serif-family: 'Source Serif 4', 'Noto Serif' , serif, 'Cambria', apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-mono-family: 'Source Code Pro', 'IBM Plex Mono', 'Roboto Mono','Noto Sans Mono', 'Noto Sans CJK',  apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-sans-family: 'Inter', 'Source Sans 3', Poppins, apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-number-family: 'Roboto Mono', 'Noto Sans Mono', apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-code-family: 'IBM Plex Mono', 'Space Mono', Consolas, Menlo, Monaco, Courier, monospace, apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji','Segoe UI Symbol', 'Noto Color Emoji';
    --affine-font-title: 36px;
    --affine-font-h-1: 28px;
    --affine-font-h-2: 26px;
    --affine-font-h-3: 24px;
    --affine-font-h-4: 22px;
    --affine-font-h-5: 20px;
    --affine-font-h-6: 18px;
    --affine-font-base: 15px;
    --affine-font-sm: 14px;
    --affine-font-xs: 12px;
    --affine-line-height: calc(1em + 8px);
    --affine-z-index-modal: 1000;
    --affine-z-index-popover: 1000;
    --affine-paragraph-space: 8px;
    --affine-popover-radius: 12px;
    --affine-editor-width: 944px;
    --affine-editor-side-padding: 96px;
    --affine-zoom: 1;
    --affine-scale: calc(1 / var(--affine-zoom));
    --affine-palette-line-yellow: rgb(255, 211, 56);
    --affine-palette-line-orange: rgb(255, 175, 56);
    --affine-palette-line-tangerine: rgb(250, 124, 69);
    --affine-palette-line-red: rgb(237, 63, 63);
    --affine-palette-line-magenta: rgb(230, 96, 164);
    --affine-palette-line-purple: rgb(110, 82, 223);
    --affine-palette-line-navy: rgb(59, 37, 204);
    --affine-palette-line-blue: rgb(79, 144, 255);
    --affine-palette-line-teal: rgb(122, 226, 213);
    --affine-palette-line-green: rgb(124, 194, 112);
    --affine-palette-line-white: rgb(255, 255, 255);
    --affine-palette-line-black: rgb(35, 35, 35);
    --affine-palette-line-grey: rgb(191, 192, 191);
    --affine-palette-shape-yellow: rgb(255, 223, 107);
    --affine-palette-shape-orange: rgb(255, 196, 107);
    --affine-palette-shape-tangerine: rgb(251, 161, 121);
    --affine-palette-shape-red: rgb(241, 111, 111);
    --affine-palette-shape-magenta: rgb(237, 140, 189);
    --affine-palette-shape-purple: rgb(147, 126, 231);
    --affine-palette-shape-navy: rgb(122, 149, 246);
    --affine-palette-shape-blue: rgb(184, 227, 255);
    --affine-palette-shape-green: rgb(157, 209, 148);
    --affine-palette-shape-white: rgb(255, 255, 255);
    --affine-palette-shape-black: rgb(35, 35, 35);
    --affine-palette-shape-grey: rgb(216, 217, 216);
    --affine-multi-players-purple: rgba(123,97,255,1);
    --affine-multi-players-magenta: rgba(245, 49, 179, 1);
    --affine-multi-players-red: rgba(243,87,52,1);
    --affine-multi-players-orange: rgba(255, 138, 0, 1);
    --affine-multi-players-green: rgba(27, 196, 125, 1);
    --affine-palette-shape-teal: rgb(184, 242, 231);
    --affine-multi-players-blue: rgba(24, 160, 251, 1);
    --affine-multi-players-brown: rgba(154, 101, 51, 1);
    --affine-multi-players-grey: rgba(170, 170, 170, 1);
    --affine-blue: rgba(30, 150, 235, 1);
    --affine-pure-black: rgba(0, 0, 0, 1);
    --affine-pure-black-10: rgba(0, 0, 0, 0.1);
    --affine-pure-black-20: rgba(0, 0, 0, 0.2);
    --affine-pure-black-80: rgba(0, 0, 0, 0.8);
    --affine-pure-white: rgba(255, 255, 255, 1);
    --affine-pure-white-10: rgba(255, 255, 255, 0.1);
    --affine-toggle-circle-background-color: rgba(255, 255, 255, 1);
    --affine-toggle-disable-background-color: rgba(119, 117, 125, 1);
    --affine-toggle-circle-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25), inset -2px -3px 2px 0px rgba(0, 0, 0, 0.05);
    --affine-button-inner-shadow: unset;
    --affine-multi-cursors-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
    --affine-multi-players-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
    --affine-grabbing-cursor: url("data:image/svg+xml,%20%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.6944%208.33487C10.9653%207.67285%2011.6283%207.21423%2012.3869%207.21423C13.1346%207.21423%2013.7895%207.65975%2014.0675%208.30642C14.3487%208.13443%2014.6802%208.03569%2015.0322%208.03569C16.0254%208.03569%2016.8548%208.82187%2016.8548%209.8214V9.90652C17.103%209.78332%2017.383%209.71426%2017.6774%209.71426C18.6706%209.71426%2019.5%2010.5004%2019.5%2011.5V14.5714C19.5%2018.4111%2016.3018%2021.5%2012.3869%2021.5C11.4279%2021.5%2010.5029%2021.3687%209.61008%2020.9533C8.71611%2020.5373%207.89034%2019.8532%207.10147%2018.8019L5.08581%2016.1683C4.51001%2015.4567%204.57347%2014.4352%205.23%2013.797C5.93899%2013.1078%207.08249%2013.1078%207.79148%2013.797L7.79968%2013.805C7.84226%2013.8483%207.88165%2013.889%207.91846%2013.9273C7.92006%2013.726%207.91977%2013.4872%207.91942%2013.2045C7.91926%2013.0733%207.91909%2012.9325%207.91909%2012.7817V9.85709C7.91909%208.85756%208.74847%208.07138%209.7417%208.07138C10.0887%208.07138%2010.4158%208.16735%2010.6944%208.33487ZM10.5643%209.85712C10.5643%209.43634%2010.2095%209.07138%209.7417%209.07138C9.27389%209.07138%208.91909%209.43633%208.91909%209.85709V12.7817C8.91909%2012.9257%208.91926%2013.0621%208.91943%2013.1909C8.92002%2013.6625%208.92049%2014.0329%208.91187%2014.307C8.9064%2014.481%208.89684%2014.6361%208.87748%2014.7637C8.8624%2014.863%208.82868%2015.055%208.70064%2015.2061C8.62011%2015.3012%208.49922%2015.3839%208.34225%2015.4068C8.19872%2015.4279%208.07952%2015.3907%208.00536%2015.3581C7.87099%2015.299%207.7587%2015.1973%207.68787%2015.1301C7.60764%2015.0539%207.49797%2014.9378%207.37723%2014.8099C7.28546%2014.7128%207.18728%2014.6088%207.09077%2014.5105C6.76957%2014.2021%206.24669%2014.2033%205.92703%2014.514C5.63861%2014.7944%205.614%2015.2343%205.86566%2015.5423L5.87549%2015.5548L7.90002%2018.2C8.61071%2019.1475%209.31465%2019.7129%2010.032%2020.0466C10.751%2020.3812%2011.5195%2020.5%2012.3869%2020.5C15.7764%2020.5%2018.5%2017.8323%2018.5%2014.5714V11.5C18.5%2011.0792%2018.1452%2010.7143%2017.6774%2010.7143C17.2096%2010.7143%2016.8548%2011.0792%2016.8548%2011.5V12C16.8548%2012.2761%2016.6309%2012.5%2016.3548%2012.5C16.0786%2012.5%2015.8548%2012.2761%2015.8548%2012V9.8214C15.8548%209.40064%2015.5%209.03569%2015.0322%209.03569C14.5643%209.03569%2014.2095%209.40064%2014.2095%209.8214V11.1428C14.2095%2011.419%2013.9857%2011.6428%2013.7095%2011.6428C13.4334%2011.6428%2013.2095%2011.419%2013.2095%2011.1428V8.99995C13.2095%208.57919%2012.8547%208.21423%2012.3869%208.21423C11.9191%208.21423%2011.5643%208.57919%2011.5643%208.99995V11.1428C11.5643%2011.419%2011.3405%2011.6428%2011.0643%2011.6428C10.7882%2011.6428%2010.5643%2011.419%2010.5643%2011.1428V9.85712Z%22%20fill%3D%22black%22%20%2F%3E%20%3Cpath%20d%3D%22M9.7417%209.07138C10.2095%209.07138%2010.5643%209.43634%2010.5643%209.85712V11.1428C10.5643%2011.419%2010.7882%2011.6428%2011.0643%2011.6428C11.3405%2011.6428%2011.5643%2011.419%2011.5643%2011.1428V8.99995C11.5643%208.57919%2011.9191%208.21423%2012.3869%208.21423C12.8547%208.21423%2013.2095%208.57919%2013.2095%208.99995V11.1428C13.2095%2011.419%2013.4334%2011.6428%2013.7095%2011.6428C13.9857%2011.6428%2014.2095%2011.419%2014.2095%2011.1428V9.8214C14.2095%209.40064%2014.5643%209.03569%2015.0322%209.03569C15.5%209.03569%2015.8548%209.40064%2015.8548%209.8214V12C15.8548%2012.2761%2016.0786%2012.5%2016.3548%2012.5C16.6309%2012.5%2016.8548%2012.2761%2016.8548%2012V11.5C16.8548%2011.0792%2017.2096%2010.7143%2017.6774%2010.7143C18.1452%2010.7143%2018.5%2011.0792%2018.5%2011.5V14.5714C18.5%2017.8323%2015.7764%2020.5%2012.3869%2020.5C11.5195%2020.5%2010.751%2020.3812%2010.032%2020.0466C9.31465%2019.7129%208.61071%2019.1475%207.90002%2018.2L5.87549%2015.5548L5.86566%2015.5423C5.614%2015.2343%205.63861%2014.7944%205.92703%2014.514C6.24669%2014.2033%206.76957%2014.2021%207.09077%2014.5105C7.18728%2014.6088%207.28546%2014.7128%207.37723%2014.8099C7.49797%2014.9378%207.60764%2015.0539%207.68787%2015.1301C7.7587%2015.1973%207.87099%2015.299%208.00536%2015.3581C8.07952%2015.3907%208.19872%2015.4279%208.34225%2015.4068C8.49922%2015.3839%208.62011%2015.3012%208.70064%2015.2061C8.82868%2015.055%208.8624%2014.863%208.87748%2014.7637C8.89684%2014.6361%208.9064%2014.481%208.91187%2014.307C8.92049%2014.0329%208.92002%2013.6625%208.91943%2013.1909C8.91926%2013.0621%208.91909%2012.9257%208.91909%2012.7817V9.85709C8.91909%209.43633%209.27389%209.07138%209.7417%209.07138Z%22%20fill%3D%22white%22%20%2F%3E%20%3C%2Fsvg%3E"), grabbing;
    --affine-grab-cursor: url("data:image/svg+xml,%20%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.6944%203.62063C10.9653%202.95862%2011.6283%202.5%2012.3869%202.5C13.3802%202.5%2014.2096%203.28619%2014.2096%204.28571V4.40655C14.4578%204.28334%2014.7378%204.21429%2015.0322%204.21429C16.0254%204.21429%2016.8548%205.00047%2016.8548%206V6.97798C17.103%206.85477%2017.383%206.78571%2017.6774%206.78571C18.6706%206.78571%2019.5%207.5719%2019.5%208.57143V14.5714C19.5%2018.4111%2016.3018%2021.5%2012.3869%2021.5C11.4279%2021.5%2010.5029%2021.3687%209.61009%2020.9533C8.71742%2020.538%207.89275%2019.8553%207.10492%2018.8065L3.89715%2014.8057C3.31723%2014.0938%203.37951%2013.0692%204.03749%2012.4296C4.74649%2011.7404%205.88998%2011.7404%206.59897%2012.4296C6.60945%2012.4398%206.61948%2012.4504%206.62902%2012.4615L7.19243%2013.1145C7.49969%2013.4896%207.73216%2013.7452%207.90552%2013.9094C7.90575%2013.9058%207.90599%2013.9021%207.90621%2013.8984C7.92066%2013.6641%207.92009%2013.374%207.91941%2013.0239C7.91926%2012.9461%207.9191%2012.8654%207.9191%2012.7817V5.14286C7.9191%204.14333%208.74848%203.35714%209.74172%203.35714C10.0887%203.35714%2010.4158%203.45312%2010.6944%203.62063ZM11.5643%2011.1429C11.5643%2011.419%2011.3405%2011.6429%2011.0643%2011.6429C10.7882%2011.6429%2010.5643%2011.419%2010.5643%2011.1429V5.14286C10.5643%204.7221%2010.2095%204.35714%209.74172%204.35714C9.2739%204.35714%208.9191%204.7221%208.9191%205.14286V12.7817C8.9191%2012.858%208.91927%2012.9337%208.91943%2013.0085C8.92019%2013.3597%208.92092%2013.6907%208.90432%2013.9599C8.89417%2014.1245%208.87652%2014.2886%208.84181%2014.4348C8.80979%2014.5696%208.74873%2014.7552%208.60644%2014.9018C8.43071%2015.0827%208.19413%2015.142%207.96546%2015.0976C7.77497%2015.0607%207.60654%2014.9565%207.46937%2014.8519C7.18917%2014.6383%206.84626%2014.2699%206.4228%2013.7533L5.88792%2013.1333C5.56593%2012.8348%205.05078%2012.8392%204.73453%2013.1467C4.44611%2013.427%204.4215%2013.8669%204.67315%2014.175L4.67604%2014.1785L7.89011%2018.1872L7.90002%2018.2C8.6107%2019.1476%209.31466%2019.7129%2010.032%2020.0467C10.751%2020.3813%2011.5195%2020.5%2012.3869%2020.5C15.7764%2020.5%2018.5%2017.8323%2018.5%2014.5714V8.57143C18.5%208.15067%2018.1452%207.78571%2017.6774%207.78571C17.2096%207.78571%2016.8548%208.15067%2016.8548%208.57143V12C16.8548%2012.2761%2016.6309%2012.5%2016.3548%2012.5C16.0786%2012.5%2015.8548%2012.2761%2015.8548%2012V6C15.8548%205.57924%2015.5%205.21429%2015.0322%205.21429C14.5644%205.21429%2014.2096%205.57924%2014.2096%206V11.1429C14.2096%2011.419%2013.9857%2011.6429%2013.7096%2011.6429C13.4334%2011.6429%2013.2096%2011.419%2013.2096%2011.1429V4.28571C13.2096%203.86496%2012.8548%203.5%2012.3869%203.5C11.9191%203.5%2011.5643%203.86496%2011.5643%204.28571V11.1429Z%22%20fill%3D%22black%22%20%2F%3E%20%3Cpath%20d%3D%22M11.0643%2011.6429C11.3405%2011.6429%2011.5643%2011.419%2011.5643%2011.1429V4.28571C11.5643%203.86496%2011.9191%203.5%2012.3869%203.5C12.8548%203.5%2013.2096%203.86496%2013.2096%204.28571V11.1429C13.2096%2011.419%2013.4334%2011.6429%2013.7096%2011.6429C13.9857%2011.6429%2014.2096%2011.419%2014.2096%2011.1429V6C14.2096%205.57924%2014.5644%205.21429%2015.0322%205.21429C15.5%205.21429%2015.8548%205.57924%2015.8548%206V12C15.8548%2012.2761%2016.0786%2012.5%2016.3548%2012.5C16.6309%2012.5%2016.8548%2012.2761%2016.8548%2012V8.57143C16.8548%208.15067%2017.2096%207.78571%2017.6774%207.78571C18.1452%207.78571%2018.5%208.15067%2018.5%208.57143V14.5714C18.5%2017.8323%2015.7764%2020.5%2012.3869%2020.5C11.5195%2020.5%2010.751%2020.3813%2010.032%2020.0467C9.31466%2019.7129%208.6107%2019.1476%207.90002%2018.2L7.89011%2018.1872L4.67604%2014.1785L4.67315%2014.175C4.4215%2013.8669%204.44611%2013.427%204.73453%2013.1467C5.05078%2012.8392%205.56593%2012.8348%205.88792%2013.1333L6.4228%2013.7533C6.84626%2014.2699%207.18917%2014.6383%207.46937%2014.8519C7.60654%2014.9565%207.77497%2015.0607%207.96546%2015.0976C8.19413%2015.142%208.43071%2015.0827%208.60644%2014.9018C8.74873%2014.7552%208.80979%2014.5696%208.84181%2014.4348C8.87652%2014.2886%208.89417%2014.1245%208.90432%2013.9599C8.92092%2013.6907%208.92019%2013.3597%208.91943%2013.0085C8.91927%2012.9337%208.9191%2012.858%208.9191%2012.7817V5.14286C8.9191%204.7221%209.2739%204.35714%209.74172%204.35714C10.2095%204.35714%2010.5643%204.7221%2010.5643%205.14286V11.1429C10.5643%2011.419%2010.7882%2011.6429%2011.0643%2011.6429Z%22%20fill%3D%22white%22%20%2F%3E%20%3C%2Fsvg%3E"), grab;
    --affine-theme-mode: light;
    --affine-brand-color: #1E96EB;
    --affine-tertiary-color: rgba(239, 250, 255, 1);
    --affine-primary-color: #1E96EB;
    --affine-primary-color-04: rgba(30, 150, 235, 0.04);
    --affine-secondary-color: rgb(125, 145, 255);
    --affine-blue-50: rgba(239, 250, 255, 1);
    --affine-blue-100: rgba(219, 244, 254, 1);
    --affine-blue-200: rgba(191, 236, 254, 1);
    --affine-blue-300: rgba(147, 226, 253, 1);
    --affine-blue-400: rgba(96, 207, 250, 1);
    --affine-blue-500: rgba(58, 181, 247, 1);
    --affine-blue-600: rgba(30, 150, 235, 1);
    --affine-blue-700: rgba(28, 129, 217, 1);
    --affine-blue-800: rgba(30, 103, 175, 1);
    --affine-blue-900: rgba(30, 87, 138, 1);
    --affine-blue-950: rgba(23, 54, 84, 1);
    --affine-background-success-color: rgba(231, 250, 243, 1);
    --affine-background-error-color: rgba(253, 236, 235, 1);
    --affine-background-processing-color: rgba(233, 241, 255, 1);
    --affine-background-warning-color: rgba(255, 237, 219, 1);
    --affine-background-primary-color: rgb(255, 255, 255);
    --affine-background-overlay-panel-color: rgb(251, 251, 252);
    --affine-background-secondary-color: rgba(244, 244, 245, 1);
    --affine-background-tertiary-color: rgb(238, 238, 238);
    --affine-background-code-block: rgba(247, 248, 250, 1);
    --affine-background-modal-color: rgba(0, 0, 0, 0.75);
    --affine-text-primary-color: rgb(18, 18, 18);
    --affine-text-secondary-color: rgb(142, 141, 145);
    --affine-text-disable-color: rgb(169, 169, 173);
    --affine-text-emphasis-color: #1E96EB;
    --affine-hover-color: rgba(0, 0, 0, 0.04);
    --affine-hover-color-filled: rgb(245, 245, 245);
    --affine-link-color: #1E67AF;
    --affine-quote-color: rgba(194, 193, 197, 1);
    --affine-list-color: rgba(133, 131, 140, 1);
    --affine-icon-color: rgb(119, 117, 125);
    --affine-icon-secondary: rgba(119, 117, 125, 0.6);
    --affine-border-color: rgb(227, 226, 228);
    --affine-divider-color: rgb(227, 226, 228);
    --affine-placeholder-color: rgb(192, 191, 193);
    --affine-edgeless-grid-color: rgb(230, 230, 230);
    --affine-success-color: rgb(16, 203, 134);
    --affine-warning-color: rgb(235, 67, 53);
    --affine-error-color: rgb(235, 67, 53);
    --affine-processing-color: rgb(39, 118, 255);
    --affine-black-10: rgba(0, 0, 0, 0.1);
    --affine-black-30: rgba(0, 0, 0, 0.3);
    --affine-black-50: rgba(0, 0, 0, 0.5);
    --affine-black-60: rgba(0, 0, 0, 0.6);
    --affine-black-80: rgba(0, 0, 0, 0.8);
    --affine-black-90: rgba(0, 0, 0, 0.9);
    --affine-black: rgb(0, 0, 0);
    --affine-white-10: rgba(255, 255, 255, 0.1);
    --affine-white-30: rgba(255, 255, 255, 0.3);
    --affine-white-50: rgba(255, 255, 255, 0.5);
    --affine-white-60: rgba(255, 255, 255, 0.6);
    --affine-white-80: rgba(255, 255, 255, 0.8);
    --affine-white-90: rgba(255, 255, 255, 0.9);
    --affine-white: rgb(255, 255, 255);
    --affine-tag-white: rgba(245, 245, 245, 1);
    --affine-tag-gray: rgba(227, 226, 224, 1);
    --affine-tag-red: rgba(255, 225, 225, 1);
    --affine-tag-orange: rgba(255, 233, 201, 1);
    --affine-tag-yellow: rgba(255, 243, 215, 1);
    --affine-tag-green: rgba(222, 244, 231, 1);
    --affine-tag-teal: rgba(222, 244, 243, 1);
    --affine-tag-blue: rgba(225, 238, 255, 1);
    --affine-tag-purple: rgba(243, 240, 255, 1);
    --affine-tag-pink: rgba(251, 231, 255, 1);
    --affine-tag-magenta: rgba(249, 232, 255, 1);
    --affine-tooltip: rgba(0, 0, 0, 1);
    --affine-button-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --affine-overlay-panel-shadow: 0px 1px 6px rgba(0,0,0,0.16), 0px 8px 14px rgba(0,0,0,0.08);
    --affine-active-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.30);
    --affine-embed-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.08);
    --affine-menu-shadow: 0px 10px 18px rgba(0,0,0,0.14), 0px -1px 12px rgba(0,0,0,0.08);
    --affine-toolbar-shadow: 0px 6px 16px #00000024;
    --affine-shadow-1: 0px 0px 4px 0px rgba(66, 65, 73, 0.14);
    --affine-shadow-2: 0px 0px 12px 0px rgba(66, 65, 73, 0.18);
    --affine-shadow-3: 0px 0px 20px 0px rgba(66, 65, 73, 0.22);
    --affine-overlay-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16), 0px 8px 14px 0px rgba(0, 0, 0, 0.08);
    --affine-popover-shadow: 0px 0px 30px rgba(75, 75, 75, 0.2), 0px 0px 4px rgba(75, 75, 75, 0.3), inset 0px 0px 0px rgba(227, 226, 228, 1);
    --affine-float-button-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1);
    --affine-float-button-shadow-1: 0px 4px 6px -3px rgba(66, 65, 73, 0.10), 0px 10px 12px -2px rgba(66, 65, 73, 0.10);
    --affine-float-button-shadow-2: 0px 4px 4px -2px rgba(66, 65, 73, 0.10), 0px 6px 8px 1px rgba(66, 65, 73, 0.05);
    --affine-kanban-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
    --affine-cmd-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.20);
    --affine-large-button-effect: 0px 12px 21px 4px rgba(30, 150, 235, 0.15);
    --affine-note-shadow-box: 0px 0px 4px 0px rgba(0, 0, 0, 0.14), 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
    --affine-note-shadow-sticker: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 26px 18px -20px rgba(0, 0, 0, 0.10);
    --affine-note-shadow-paper: 0px 2px 4px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 10px #FFF, 0px 3px 6px 12px rgba(0, 0, 0, 0.14);
    --affine-note-shadow-float: 0px 0px 32px 0px rgba(0, 0, 0, 0.09), 0px 0px 3px 0px rgba(0, 0, 0, 0.10);
    --affine-note-shadow-film: 10px 10px 0px 6px #000, 0px 0px 0px 6px #000;
    --affine-ai-empty-shadow: 0px 4px 4px rgba(66, 65, 73, 0.10), 0px 6px 8px rgba(66, 65, 73, 0.05);
    --affine-button-gray-color: rgba(245, 245, 245, 1);
    --affine-card-background-blue: linear-gradient(180deg, #F0F3FD 0%, #FCFCFD 100%);
    --affine-card-background-green: linear-gradient(180deg, #F3F9FD 0%, #FCFCFD 100%);
    --affine-card-background-grey: linear-gradient(180deg, #F1F1F1 0%, #FCFCFD 100%);
    --affine-windows-close-button: #C42B1C;
    --affine-text-highlight-pink: rgba(255, 206, 206, 1);
    --affine-text-highlight-red: rgba(254, 213, 213, 1);
    --affine-text-highlight-orange: rgba(254, 223, 187, 1);
    --affine-text-highlight-yellow: rgba(254, 243, 161, 1);
    --affine-text-highlight-green: rgba(225, 250, 177, 1);
    --affine-text-highlight-teal: rgba(173, 248, 233, 1);
    --affine-text-highlight-blue: rgba(204, 226, 254, 1);
    --affine-text-highlight-purple: rgba(237, 221, 255, 1);
    --affine-text-highlight-grey: rgba(234, 236, 239, 1);
    --affine-text-highlight-foreground-red: rgba(198, 34, 34, 1);
    --affine-text-highlight-foreground-orange: rgba(211, 79, 11, 1);
    --affine-text-highlight-foreground-yellow: rgba(182, 124, 4, 1);
    --affine-text-highlight-foreground-green: rgba(20, 147, 67, 1);
    --affine-text-highlight-foreground-teal: rgba(7, 130, 160, 1);
    --affine-text-highlight-foreground-blue: rgba(33, 89, 211, 1);
    --affine-text-highlight-foreground-purple: rgba(132, 46, 211, 1);
    --affine-text-highlight-foreground-grey: rgba(122, 122, 122, 1);
    --affine-note-background-yellow: rgba(253, 230, 138, 1);
    --affine-note-background-orange: rgba(255, 196, 143, 1);
    --affine-note-background-red: rgba(250, 182, 182, 1);
    --affine-note-background-magenta: rgba(255, 218, 237, 1);
    --affine-note-background-purple: rgba(221, 214, 254, 1);
    --affine-note-background-blue: rgba(205, 235, 255, 1);
    --affine-note-background-teal: rgba(199, 248, 242, 1);
    --affine-note-background-green: rgba(201, 248, 193, 1);
    --affine-note-background-black: rgba(0, 0, 0, 1);
    --affine-note-background-grey: rgba(230, 230, 230, 1);
    --affine-note-background-white: rgba(255, 255, 255, 1);
  }
  ._1939et45[data-client-border="true"] {
    overflow: visible;
    padding: 0px;
    border-radius: 0px;
  }
}
@keyframes xfeesm0 {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes xfeesm1 {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
}
.xfeesm2 {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--affine-border-color);
  box-shadow: var(--affine-menu-shadow);
  gap: 4px;
  min-width: -moz-max-content;
  min-width: max-content;
  width: -moz-fit-content;
  width: fit-content;
  background: var(--affine-background-primary-color);
}
.xfeesm3 {
  will-change: transform opacity;
}
.xfeesm3[data-state="open"] {
  animation: xfeesm0 0.2s ease-in-out;
}
.xfeesm3[data-state="closed"] {
  animation: xfeesm1 0.2s ease-in-out;
}
.xfeesm4 {
  width: 1px;
  height: 24px;
  background: var(--affine-divider-color);
}
.xfeesm5 {
  display: flex;
  align-items: center;
  color: inherit;
  gap: 4px;
  height: 32px;
  padding: 0 6px;
}
.xfeesm6 {
  border-radius: 8px;
}
.xfeesm6:hover {
  background: var(--affine-hover-color);
}
.xfeesm7 {
  color: inherit;
}
.xfeesm7:hover {
  background: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
.xfeesm8 {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: var(--affine-icon-color);
}
.xfeesm7:hover .xfeesm8 {
  color: var(--affine-error-color);
}
.q0t1ik0 {
  position: absolute;
  bottom: 26px;
  width: 100%;
  z-index: 1;
}
._1nxkrf30 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0px 4px;
  border-radius: 4px;
}
._1nxkrf30:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1nxkrf31 {
  width: 0;
  flex: 1;
}
._1nxkrf32 {
  width: 24px;
  height: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1nxkrf33 {
  gap: 4px;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
._1nxkrf33:has(._1nxkrf32) {
  padding-left: 0;
}
._1nxkrf34 {
  opacity: 0;
}
._1nxkrf30:hover ._1nxkrf34 {
  opacity: 1;
}
._1nxkrf35 {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--affine-v2-icon-primary);
}
._1nxkrf36 {
  --rotate: 90deg;
  transition: transform 0.23s cubic-bezier(.56,.15,.37,.97);
  transform: rotate(var(--rotate));
}
._1nxkrf30[data-collapsed="true"] ._1nxkrf36 {
  --rotate: 0deg;
}
._1nxkrf37 {
  font-size: 14px;
  line-height: 22px;
  color: var(--affine-v2-text-tertiary);
  margin-left: 12px;
}
._1nxkrf38 {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--affine-v2-text-secondary);
}
._1nxkrf39 {
  padding: 0px 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  border-radius: 4px;
}
._16r8npv0 {
  display: flex;
  gap: 8px;
  flex-shrink: 1.5;
  min-width: 0;
  justify-content: flex-end;
}
._16r8npv1 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 5;
  transition: flex-shrink 0.23s cubic-bezier(.56,.15,.37,.97);
}
._16r8npv1:empty {
  display: none;
}
._16r8npv1:not(:empty) {
  min-width: 40px;
}
._16r8npv1:hover {
  flex-shrink: 0.2;
}
._16r8npv2 {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 128px;
}
._16r8npv2:last-child {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
._16r8npv3 {
  height: 24px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--affine-v2-layer-insideBorder-blackBorder);
  padding: 0px 8px 0px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: min(128px, 300%);
  min-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--affine-v2-layer-background-primary);
  flex-shrink: 0;
}
._16r8npv4 {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--affine-v2-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
._16r8npv5 {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
._16r8npv6 {
  flex-shrink: 0;
}
._16r8npv6:empty {
  display: none;
}
._16r8npv7 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
._14kkmv00 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._14kkmv01 {
  padding: 4px;
}
._1ncznop0 {
  color: var(--affine-v2-text-placeholder);
}
._1ncznop1 {
  display: inline-block;
}
._1ncznop1::first-letter {
  text-transform: uppercase;
}
._1ncznop2 {
  width: 60px;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
._14sswyx0 {
  color: var(--affine-placeholder-color);
}
.s02m0h0 {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: var(--affine-v2-layer-background-secondary);
}
.s02m0h1 {
  height: 44px;
}
.s02m0h2 {
  height: 44px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.s02m0h4 {
  --s02m0h3: unset;
  max-width: var(--s02m0h3);
}
.s02m0h4.center {
  --s02m0h3: calc(100% - 12px - 88px - 16px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.s02m0h4:not(.center) {
  width: 0;
  flex: 1;
}
.s02m0h5 {
  width: 0;
  flex: 1;
}
.s02m0h6 {
  display: flex;
  align-items: center;
  gap: 0;
}
.s02m0h7 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._1e0aj250 {
  padding: 0;
  overflow-y: auto;
  background-color: var(--affine-v2-layer-background-secondary);
}
._1e0aj251 {
  padding: 12px;
}
._1e0aj252 {
  color: var(--affine-v2-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
._1e0aj253 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--affine-v2-text-primary);
  padding: 0 8px;
  height: 44px;
}
._1e0aj254 {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1e0aj255 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1e0aj256 {
  color: var(--affine-v2-button-primary);
}
._1e0aj257 {
  padding: 4px;
}
._1e0aj258 {
  width: 100%;
  height: 44px;
  font-size: 17px;
  align-self: center;
}
._1e0aj259 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
._1e0aj25a {
  color: var(--affine-v2-text-tertiary);
  padding: 4px;
}
._1e0aj25b {
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1e0aj25c {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}
._5o6xyh0[data-empty=true] {
  color: var(--affine-placeholder-color);
}
._5o6xyh0[data-readonly="true"] {
  pointer-events: none;
}
._5o6xyh1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
._5o6xyh2 {
  gap: 20px;
}
._5o6xyh3 {
  padding: 0;
  position: relative;
  top: calc(-3.5px + var(--radix-popper-anchor-height) * -1);
  left: -3.5px;
  width: calc(var(--radix-popper-anchor-width) + 16px);
  overflow: hidden;
  min-width: 400px;
}
._5o6xyh4 {
  height: 32px;
  width: 28px;
}
._5o6xyh5 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 12px 0px;
  min-height: 42px;
}
._5o6xyh2 ._5o6xyh5 {
  border-radius: 12px;
  padding-bottom: 10px;
  background-color: var(--affine-v2-layer-background-primary);
}
._5o6xyh6 {
  border-bottom-color: var(--affine-v2-tab-divider-divider);
}
._5o6xyh7 {
  flex-grow: 1;
  height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
._5o6xyh7::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
._5o6xyh7::placeholder {
  color: var(--affine-v2-text-placeholder);
}
._5o6xyh8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px 8px;
  max-height: 400px;
  overflow: auto;
}
._5o6xyh2 ._5o6xyh8 {
  padding: 0;
  max-height: none;
}
._5o6xyh9 {
  overflow-x: hidden;
  position: relative;
  max-height: 200px;
  gap: 8px;
}
._5o6xyh2 ._5o6xyh9 {
  border-radius: 12px;
  background-color: var(--affine-v2-layer-background-primary);
  gap: 0;
  padding: 4px;
  max-height: none;
}
._5o6xyha {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  height: 34px;
  gap: 8px;
  cursor: pointer;
  border-radius: 4px;
}
._5o6xyha[data-focused=true] {
  background-color: var(--affine-hover-color);
}
._5o6xyh2 ._5o6xyha {
  height: 44px;
}
._5o6xyh2 ._5o6xyha[data-focused="true"] {
  height: 44px;
  background-color: transparent;
}
._5o6xyhb {
  padding: 10px 8px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
  height: 34px;
}
._5o6xyh2 ._5o6xyhb {
  height: 44px;
}
._5o6xyhc {
  height: 22px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}
._5o6xyhc:last-child {
  min-width: -moz-max-content;
  min-width: max-content;
}
._5o6xyhd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: var(--affine-text-primary-color);
  border-color: var(--affine-border-color);
  font-size: inherit;
  border-radius: 10px;
  -moz-column-gap: 4px;
       column-gap: 4px;
  border-width: 1px;
  border-style: solid;
  background: var(--affine-background-primary-color);
  max-width: 128px;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._5o6xyhd[data-focused=true] {
  border-color: var(--affine-primary-color);
}
._5o6xyhe {
  font-size: inherit;
  padding: 4px 4px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  min-width: 0;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
}
._5o6xyhf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._5o6xyhg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
._5o6xyhg:hover {
  background: var(--affine-hover-color);
}
._5o6xyhh {
  margin-right: 0.5em;
}
._5o6xyhi {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
._1xdtbgg0 {
  display: flex;
  gap: 8px;
}
._1xdtbgg1 {
  height: 100%;
  display: flex;
  align-items: center;
}
._1xdtbgg2 {
  top: calc(var(--radix-popper-anchor-height) - 18px) !important;
}
.hpf4r70 {
  font-weight: 400;
}
.vq898l1 {
  padding-top: 3px;
  padding-bottom: 3px;
}
._1gknw430 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.wly4of0 {
  height: 100px;
  align-items: center;
  padding: 48px 16px 20px 24px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  background: var(--affine-background-primary-color);
}
.wly4of1 {
  font-size: var(--affine-font-h-5);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wly4of2 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
._1d708yl0 {
  display: flex;
  color: var(--affine-text-primary-color);
  height: 54px;
  flex-shrink: 0;
  contain: strict;
  width: 100%;
  align-items: stretch;
  transition: background-color 0.2s, opacity 0.2s;
  overflow: hidden;
  cursor: default;
  will-change: opacity;
}
._1d708yl0:hover {
  background-color: var(--affine-hover-color);
}
._1d708yl0[data-clickable=true] {
  cursor: pointer;
}
._1d708yl1 {
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  background: var(--affine-hover-color-filled);
  box-shadow: var(--affine-menu-shadow);
  max-width: 360px;
  min-width: 260px;
}
._1d708yl2 {
  position: relative;
  margin-left: -8px;
  height: 100%;
  outline: none;
  padding-left: 8px;
}
[data-draggable=true] ._1d708yl2:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 4px;
  height: 4px;
  transition: height 0.2s, opacity 0.2s;
  background-color: var(--affine-placeholder-color);
  border-radius: 2px;
  opacity: 0;
  will-change: height, opacity;
}
[data-draggable=true] ._1d708yl2:hover:before {
  height: 12px;
  opacity: 1;
}
[data-draggable=true][data-dragging=true] ._1d708yl2 {
  opacity: 0.5;
}
[data-draggable=true][data-dragging=true] ._1d708yl2:before {
  height: 32px;
  width: 2px;
  opacity: 1;
}
._1d708yl0 > :first-child {
  padding-left: 16px;
}
._1d708yl0 > :last-child {
  padding-right: 8px;
}
._1d708yl3 {
  width: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
}
._1d708yl4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--affine-font-h-3);
}
._1d708yl5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 16px;
  max-width: calc(100% - 64px);
  flex: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1d708yl6 {
  overflow: hidden;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
  text-overflow: ellipsis;
  align-self: stretch;
}
._1d708yl7 {
  overflow: hidden;
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: stretch;
}
._1d708yl8 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-h-3);
  color: var(--affine-icon-color);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
._1d708yl9 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  padding: 0 8px;
  height: 60px;
  width: 100%;
}
._1d708yla {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding: 0 8px;
}
._1d708ylb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
._1d708ylc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 6px;
       column-gap: 6px;
  flex-shrink: 0;
}
._17zi9nc0 {
  display: flex;
  color: var(--affine-text-primary-color);
  height: 54px;
  flex-shrink: 0;
  width: 100%;
  contain: strict;
  align-items: stretch;
  transition: background-color 0.2s, opacity 0.2s;
  overflow: hidden;
  cursor: default;
  will-change: opacity;
}
._17zi9nc0:hover {
  background-color: var(--affine-hover-color);
}
._17zi9nc0[data-clickable=true] {
  cursor: pointer;
}
._17zi9nc1 {
  height: 45px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  background: var(--affine-hover-color-filled);
  box-shadow: var(--affine-menu-shadow);
  max-width: 360px;
  min-width: 260px;
}
._17zi9nc2 {
  position: relative;
  margin-left: -8px;
  height: 100%;
  outline: none;
  padding-left: 8px;
}
[data-draggable=true] ._17zi9nc2:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 4px;
  height: 4px;
  transition: height 0.2s, opacity 0.2s;
  background-color: var(--affine-placeholder-color);
  border-radius: 2px;
  opacity: 0;
  will-change: height, opacity;
}
[data-draggable=true] ._17zi9nc2:hover:before {
  height: 12px;
  opacity: 1;
}
[data-draggable=true][data-dragging=true] ._17zi9nc2 {
  opacity: 0.5;
}
[data-draggable=true][data-dragging=true] ._17zi9nc2:before {
  height: 32px;
  width: 2px;
  opacity: 1;
}
._17zi9nc0 > :first-child {
  padding-left: 16px;
}
._17zi9nc0 > :last-child {
  padding-right: 8px;
}
._17zi9nc3 {
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
._17zi9nc4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--affine-font-h-3);
}
._17zi9nc5 {
  display: flex;
  align-items: flex-start;
  padding: 0 16px;
  max-width: calc(100% - 64px);
  flex: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._17zi9nc6 {
  overflow: hidden;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: center;
  padding-right: 4px;
}
._17zi9nc7 {
  overflow: hidden;
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-base);
  flex-shrink: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: center;
}
._17zi9nc8 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-h-3);
  color: var(--affine-icon-color);
  flex-shrink: 0;
}
._17zi9nc9 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  padding: 0 8px;
  height: 60px;
  width: 100%;
}
._17zi9nca {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  flex-shrink: 0;
  flex-wrap: nowrap;
  padding: 0 8px;
}
._17zi9ncb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
._17zi9ncc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 6px;
       column-gap: 6px;
  flex-shrink: 0;
}
._17zi9ncd {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._17zi9nce {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
._1fcrzny1 {
  width: 100%;
  flex: 1;
}
._1fcrzny2 {
  width: 100%;
  max-width: 100%;
  container-name: _1fcrzny0;
  container-type: inline-size;
  background: var(--affine-background-primary-color);
}
._1fcrzny3 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
._1fcrzny5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
._1fcrzny7 {
  display: none;
}
._1fcrzny8 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  opacity: 0;
}
._1fcrzny8[data-favorite], ._1d708yl0:hover ._1fcrzny8, ._17zi9nc0:hover ._1fcrzny8 {
  opacity: 1;
}
._1fcrzny9 {
  color: inherit;
  text-decoration: none;
}
._1fcrzny9:visited {
  color: inherit;
}
._1fcrzny9:active {
  color: inherit;
}
._1fcrznya {
  position: absolute;
  right: 0;
  width: 100%;
  height: 60px;
  display: none;
  z-index: 1;
}
._1fcrznya[data-show=true] {
  background: var(--affine-background-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: auto;
}
._1fcrznyb {
  color: var(--affine-icon-color);
}
._1fcrznyb:hover {
  background: var(--affine-background-error-color);
}
._1fcrznyb:hover ._1fcrznyc {
  color: var(--affine-error-color);
}
@container _1fcrzny0 (max-width: 800px) {
  ._1fcrzny6[data-hide-item="true"] {
    display: none;
  }
}
._19uld670 {
  padding: 0 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  align-items: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
  position: relative;
  white-space: nowrap;
}
._19uld670[data-sorting], ._19uld670:hover {
  color: var(--affine-text-primary-color);
}
._19uld670[data-sortable] {
  cursor: pointer;
}
._19uld670:not(:last-child) {
  border-right: 1px solid var(--affine-hover-color-filled);
}
._19uld671 {
  display: inline-flex;
  font-size: 14px;
  color: var(--affine-icon-color);
}
._1f9fbt70 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._1f9fbt71 {
  display: flex;
  align-items: center;
  padding: 10px 6px 10px 16px;
  position: sticky;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  background: var(--affine-background-primary-color);
  transition: box-shadow 0.2s ease-in-out;
  transform: translateY(-0.5px);
}
[data-has-scroll-top=true] ._1f9fbt71 {
  box-shadow: 0 0.5px var(--affine-border-color);
}
._1f9fbt72 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
}
._1f9fbt71[data-selectable=toggle] ._1f9fbt72 {
  width: 32px;
}
._1f9fbt71[data-selection-active=true] ._1f9fbt72 {
  width: 24px;
}
.nxh85d0 {
  padding: 4px 12px;
}
.nxh85d0:hover {
  background-color: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
.nxh85d0:hover svg {
  color: var(--affine-error-color);
}
.nxh85d1 {
  transition: all 0.3s;
}
.db1v2a0 {
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  margin: 0 16px;
  display: flex;
  font-size: var(--affine-font-xs);
  background: var(--affine-background-secondary-color);
}
.db1v2a0[data-show="false"] {
  display: none;
  pointer-events: none;
}
.db1v2a1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.db1v2a1.large {
  width: 16px;
  height: 16px;
}
.db1v2a2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.db1v2a3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  border: 1px solid var(--affine-background-overlay-panel-color);
}
.db1v2a3:hover {
  box-shadow: 0 0 0 1px var(--affine-primary-color);
}
.db1v2a3.active {
  box-shadow: 0 0 0 1px var(--affine-primary-color);
}
.db1v2a4 {
  margin-left: 20px;
  margin-right: 8px;
}
.db1v2a5 {
  padding: 0px 10px;
  margin-right: 4px;
}
@keyframes _11a3zjy1 {
  0% {
    opacity: 0;
    height: 0px;
  }
  100% {
    opacity: 1;
    height: var(--radix-collapsible-content-height);
  }
}
@keyframes _11a3zjy2 {
  0% {
    opacity: 1;
    height: var(--radix-collapsible-content-height);
  }
  100% {
    opacity: 0;
    height: 0px;
  }
}
._11a3zjy0 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
._11a3zjy3 {
  overflow: hidden;
}
._11a3zjy3[data-state="open"] {
  animation: _11a3zjy1 0.3s ease-in-out;
}
._11a3zjy3[data-state="closed"] {
  animation: _11a3zjy2 0.3s ease-in-out;
}
._11a3zjy4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._11a3zjy5 {
  display: flex;
  align-items: center;
  padding: 0px 16px 0px 6px;
  height: 28px;
  contain: strict;
  background: var(--affine-background-primary-color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._11a3zjy5:hover {
  background: var(--affine-hover-color-filled);
}
._11a3zjy6 {
  flex: 1;
}
._11a3zjy7 {
  cursor: pointer;
}
._11a3zjy8 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
}
._11a3zjy9 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-disable-color);
}
._11a3zjya {
  display: flex;
  opacity: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--affine-font-xs);
  height: 20px;
  border-radius: 4px;
  padding: 0 8px;
}
._11a3zjya:hover {
  background: var(--affine-hover-color);
}
._11a3zjy5:hover ._11a3zjya {
  opacity: 1;
}
._11a3zjyb {
  opacity: 0;
  font-size: 20px;
  color: var(--affine-icon-color);
  transition: transform 0.2s ease-in-out;
}
._11a3zjyb[data-collapsed="false"] {
  transform: rotate(90deg);
}
._11a3zjy5:hover ._11a3zjyb, ._11a3zjyb[data-collapsed="true"] {
  opacity: 1;
}
._11a3zjyc {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: inherit;
}
._11a3zjyc[data-collapsed="true"] {
  transform: rotate(-90deg);
}
._11a3zjyc[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
._11a3zjyc:hover {
  background: var(--affine-hover-color);
}
._1e28x750 {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  color: var(--affine-text-primary-color);
  background-color: var(--affine-white-80);
  border-radius: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  text-align: start;
  box-shadow: var(--affine-shadow-1);
}
._1e28x750:hover {
  background-color: var(--affine-hover-color);
}
._1e28x750[aria-disabled] {
  color: var(--affine-text-disable-color);
}
._1e28x750[aria-disabled]:hover {
  background-color: var(--affine-white-80);
  cursor: not-allowed;
}
._1e28x751 {
  display: flex;
  justify-content: center;
  align-items: center;
}
._1e28x752 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
._1e28x753 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
}
._1c4flu20 {
  background-color: var(--affine-background-overlay-panel-color);
}
._1c4flu21 {
  background-color: var(--affine-v2-button-secondary);
}
._1t97t980 {
  min-width: 220px;
}
._1t97t981 {
  margin-left: 16px;
  -webkit-app-region: no-drag;
}
._1t97t982 {
  padding-right: 8px;
}
._1t97t983 {
  font-size: var(--affine-font-xs);
  flex-wrap: nowrap;
}
._1t97t983[data-active="true"] {
  color: var(--affine-primary-color);
}
._1t97t984 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
  font-size: var(--affine-font-xs);
}
._1t97t985 {
  font-weight: 400;
  color: var(--affine-text-secondary-color);
}
._1t97t986 {
  padding: 4px 12px;
  height: 28px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  margin-bottom: 4px;
}
._1t97t987 {
  padding: 4px 12px;
  height: 28px;
  font-size: var(--affine-font-xs);
}
._1t97t988 {
  display: flex;
  flex-wrap: wrap;
  max-width: 200px;
  gap: 8px;
  padding: 4px 12px;
}
._1t97t989 {
  color: var(--affine-text-disable-color);
}
._1t97t989[data-active="true"] {
  color: var(--affine-text-primary-color);
}
._18go9cy0 {
  display: flex;
  align-items: center;
}
.mrpiv42 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 32px;
}
.mrpiv43 {
  display: flex;
  align-items: center;
}
.mrpiv44 {
  overflow-x: hidden;
  position: relative;
  height: 100%;
  gap: 8px;
}
.mrpiv45 {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mrpiv46 {
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
  position: absolute;
  height: 100%;
  max-width: 100%;
  transition: all 0.2s 0.3s ease-in-out;
}
.mrpiv42:hover .mrpiv46 {
  max-width: var(--mrpiv40);
}
.mrpiv47 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  opacity: 0;
  transition: all 0.2s;
  background: linear-gradient(90deg, transparent 0%, var(--affine-hover-color-filled) 40%);
}
.mrpiv42:hover .mrpiv47 {
  opacity: 1;
}
.mrpiv48 {
  height: 22px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}
.mrpiv48:last-child {
  min-width: -moz-max-content;
  min-width: max-content;
}
.mrpiv49 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: var(--affine-text-primary-color);
  border-color: var(--affine-border-color);
}
.mrpiv49[data-focused=true] {
  border-color: var(--affine-primary-color);
}
.mrpiv4a {
  font-size: inherit;
  border-radius: 10px;
  -moz-column-gap: 4px;
       column-gap: 4px;
  border-width: 1px;
  border-style: solid;
  background: var(--affine-background-primary-color);
  max-width: 128px;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mrpiv4b {
  font-size: inherit;
  padding: 4px 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 30px;
}
.mrpiv4c {
  font-size: var(--affine-font-sm);
  background: var(--mrpiv41);
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--affine-v2-database-border);
  gap: 4px;
}
.mrpiv4c[data-focused=true] {
  border-color: var(--affine-primary-color);
}
.mrpiv4d {
  font-size: var(--affine-font-h-5);
  right: 0;
  position: sticky;
  display: inline-flex;
}
.mrpiv4e {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--mrpiv41);
}
.mrpiv4f {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mrpiv4g {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
.mrpiv4g:hover {
  background: var(--affine-hover-color);
}
.sy3qxl0 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
.d5vz610[data-empty=true] {
  color: var(--affine-placeholder-color);
}
.d5vz610[data-readonly="true"] {
  pointer-events: none;
}
.d5vz611 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
.d5vz612 {
  gap: 20px;
}
.d5vz613 {
  padding: 0;
  position: relative;
  top: calc(-3.5px + var(--radix-popper-anchor-height) * -1);
  left: -3.5px;
  width: calc(var(--radix-popper-anchor-width) + 16px);
  overflow: hidden;
  min-width: 400px;
}
.d5vz614 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 12px 0px;
  min-height: 42px;
}
.d5vz612 .d5vz614 {
  border-radius: 12px;
  padding-bottom: 10px;
  background-color: var(--affine-v2-layer-background-primary);
}
.d5vz615 {
  height: 32px;
  width: 28px;
}
.d5vz616 {
  border-bottom-color: var(--affine-v2-tab-divider-divider);
}
.d5vz617 {
  flex-grow: 1;
  height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
.d5vz617::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
.d5vz617::placeholder {
  color: var(--affine-v2-text-placeholder);
}
.d5vz618 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px 8px;
  max-height: 400px;
  overflow: auto;
}
.d5vz612 .d5vz618 {
  padding: 0;
  max-height: none;
}
.d5vz619 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
}
.d5vz612 .d5vz619 {
  font-size: var(--affine-font-sm);
}
.d5vz61a {
  overflow-x: hidden;
  position: relative;
  max-height: 200px;
  gap: 8px;
}
.d5vz612 .d5vz61a {
  border-radius: 12px;
  background-color: var(--affine-v2-layer-background-primary);
  gap: 0;
  padding: 4px;
  max-height: none;
}
.d5vz61b {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  height: 34px;
  gap: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.d5vz61b[data-focused=true] {
  background-color: var(--affine-hover-color);
}
.d5vz612 .d5vz61b {
  height: 44px;
}
.d5vz612 .d5vz61b[data-focused="true"] {
  height: 44px;
  background-color: transparent;
}
.d5vz61c {
  opacity: 0;
}
:is(.d5vz61b:hover, .d5vz612) .d5vz61c {
  opacity: 1;
}
.d5vz61c[data-state=open] {
  opacity: 1;
}
.d5vz61d {
  flex-grow: 1;
}
.d5vz61e {
  padding: 10px 8px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
  height: 34px;
}
.d5vz612 .d5vz61e {
  height: 44px;
}
.d5vz61g {
  transform: translateX(4px);
}
.d5vz61h {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: auto;
}
.d5vz61h[data-radix-scroll-area-viewport] > div {
  display: table !important;
}
._7xofzw1 {
  transform: translateX(4px);
}
._7xofzw2 {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: auto;
}
._7xofzw2[data-radix-scroll-area-viewport] > div {
  display: table !important;
}
._7xofzw3 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._7xofzw4 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
._7xofzw5 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
._7xofzw6 {
  height: auto;
  border-radius: 12px;
}
._7xofzw7 {
  color: var(--affine-v2-button-error);
}
._7xofzw8 {
  display: flex;
  align-items: center;
  justify-content: center;
}
._7xofzw9 {
  flex: 1;
}
._7xofzwa {
  opacity: 0;
  color: var(--affine-v2-button-primary);
  width: 20px;
  height: 20px;
}
._7xofzwa[data-selected="true"] {
  opacity: 1;
}
._1rltteu0 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1rltteu1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  margin-right: 6px;
}
._1rltteu2 {
  font-size: var(--affine-font-sm);
  line-height: 1.5em;
  color: var(--affine-text-primary-color);
}
._1rltteu3 {
  font-size: var(--affine-font-base);
  line-height: 1.6em;
  color: var(--affine-text-secondary-color);
  margin-right: 12px;
}
._1rltteu4 {
  color: var(--affine-primary-color);
  margin-right: 6px;
  font-size: 16px;
}
._1rltteu5 {
  color: var(--affine-icon-color);
  margin-right: 6px;
  font-size: 16px;
}
.gh07g40 {
  height: 100px;
  align-items: center;
  padding: 48px 16px 20px 24px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  background: var(--affine-background-primary-color);
}
.gh07g41 {
  font-size: var(--affine-font-h-5);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.gh07g42 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
._1sdx6fg0 {
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 12px;
  margin-right: 8px;
  height: 1px;
  background: var(--affine-border-color);
}
._1edw9370 {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  gap: 20px;
}
._1edw9371 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
._1edw9372 {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
}
._1edw9373 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0px 20px;
  margin-bottom: 8px;
}
.w0a43z0 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
.w0a43z1 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
._7pfxs90 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._7pfxs91 {
  border-radius: 4px;
  padding: 0 8px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-v2-toast-iconState-error);
  background: var(--affine-v2-layer-background-error);
  border: 1px solid var(--affine-v2-database-border);
}
._1938s9j0 {
  padding: 3px 4px;
}
._1938s9j1 {
  height: 100%;
  display: flex;
  gap: 2px;
  align-items: center;
}
._1938s9j2 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._1938s9j3 {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
  line-height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  white-space: nowrap;
}
._1938s9j3:hover:not([data-disabled]) {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1938s9j4 {
  padding: 0 8px;
  border: 1px solid var(--affine-v2-database-border);
  background: var(--affine-v2-layer-background-error);
  color: var(--affine-v2-toast-iconState-error);
  border-radius: 4px;
}
._1p1unqi0 {
  border: 1px solid transparent;
  padding: 6px;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  font-size: var(--affine-font-sm);
}
._1p1unqi0:focus {
  border: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
}
._1p1unqi0::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
._1p1unqi0::placeholder {
  color: var(--affine-placeholder-color);
}
._1p1unqi1 {
  padding: 0px;
}
._1p1unqi2 {
  color: var(--affine-v2-icon-primary);
}
input._1p1unqi3 {
  border: 1px solid var(--affine-blue-700);
}
.x0t5250 {
  padding-top: 3px;
  padding-bottom: 3px;
}
.tvc39r0 {
  width: 100%;
}
.tvc39r2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tvc39r3 {
  width: 24px;
  height: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tvc39r4 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tvc39r5 {
  top: calc(var(--radix-popper-anchor-height) - 18px) !important;
}
.tvc39r6 {
  margin-left: 4px;
}
.frsk9c0 {
  padding: 3px 4px;
  display: flex;
  align-items: center;
}
.frsk9c1 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._13uji0j0 {
  border: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: break-spaces;
  word-break: break-word;
  padding: 6px;
  padding-left: 5px;
  overflow: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
._13uji0j0::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
._13uji0j0::placeholder {
  color: var(--affine-placeholder-color);
}
._13uji0j1 {
  position: relative;
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
}
._13uji0j2 {
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  position: relative;
  height: auto;
}
._13uji0j3 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
._13uji0j4 {
  outline: 1px solid transparent;
  padding: 6px;
}
._13uji0j4:focus-within {
  outline: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._13uji0j5 {
  border: none;
  white-space: break-spaces;
  word-break: break-word;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
._13uji0j6 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
._1w84vyn0 {
  width: 100%;
  height: 100%;
}
._1w84vyn1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: var(--affine-v2-layer-background-primary);
  border-radius: 4px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  font-size: 14px;
}
._1w84vyn2 {
  font-size: 24px;
}
._1w84vyn3 {
  padding: 0px 4px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  overflow: hidden;
  container-name: list-view-root;
  container-type: size;
}
._1w84vyn3:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1w84vyn4 {
  position: absolute;
  padding: 5px 2px;
  color: var(--affine-v2-icon-secondary);
}
._1w84vyn5 {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
}
._1w84vyn3:hover ._1w84vyn5 {
  opacity: 1;
}
._1w84vyn6 {
  width: 0;
  height: 24px;
  font-size: 20px;
  padding: 2px;
  margin-left: -12px;
  flex-shrink: 0;
  display: flex;
  color: var(--affine-v2-icon-primary);
  overflow: hidden;
  align-items: center;
  justify-content: end;
  transition: width 0.25s ease, margin-left 0.25s ease;
  pointer-events: none;
}
._1w84vyn6[data-select-mode="true"] {
  width: 24px;
  margin-left: 0;
}
._1w84vyn7 {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
._1w84vyn8 {
  width: 0;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
._1w84vyn9 {
  height: 100%;
  flex-shrink: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  min-width: 200px;
}
._1w84vyna {
  width: 0;
  flex: 1;
}
._1w84vynb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1w84vync {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
._1w84vynd {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
._1w84vyne {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
._1w84vynh {
  --ring-color: transparent;
  --light-shadow: 0px 0px 0px 1px var(--ring-color), 0px 2px 3px rgba(0,0,0,.05);
  --dark-shadow: 0px 0px 0px 1px var(--ring-color), 0px 2px 3px rgba(0,0,0,.05);
  --light-shadow-hover: 0px 0px 0px 1px var(--ring-color), 0px 4px 6px rgba(0,0,0,.1);
  --dark-shadow-hover: 0px 0px 0px 1px var(--ring-color), 0px 4px 6px rgba(0,0,0,.1);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--affine-v2-layer-background-mobile-secondary);
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  box-shadow: 0px 0px 0px 1px var(--ring-color), 0px 0px 3px rgba(0,0,0,.05);
  overflow: hidden;
  transition: box-shadow 0.23s ease, border-color 0.23s ease;
}
._1w84vyn0[data-selected="true"] ._1w84vynh {
  --ring-color: var(--affine-v2-layer-insideBorder-primaryBorder);
}
._1w84vynh:hover {
  border-color: var(--affine-v2-pagelist-hoverBorder);
}
[data-theme="light"] ._1w84vynh {
  box-shadow: var(--light-shadow);
}
[data-theme="light"] ._1w84vynh:hover {
  box-shadow: var(--light-shadow-hover);
}
[data-theme="dark"] ._1w84vynh {
  box-shadow: var(--dark-shadow);
}
[data-theme="dark"] ._1w84vynh:hover {
  box-shadow: var(--dark-shadow-hover);
}
._1w84vyni {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
._1w84vynj {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
  line-height: 0;
}
._1w84vynk {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--affine-v2-text-primary);
  letter-spacing: -0.24px;
  width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
._1w84vynl {
  width: 100%;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-primary);
  min-height: 20px;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}
._1w84vynm {
  width: 20px;
  height: 20px;
  font-size: 16px;
  padding: 2px;
  color: var(--affine-v2-icon-primary);
  pointer-events: none;
}
._1w84vynn {
  left: -4px;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
}
._1w84vynh:hover ._1w84vynn {
  opacity: 1;
}
@container list-view-root (width <= 750px) {
  ._1w84vynf {
    display: none;
  }
}
@container list-view-root (width <= 560px) {
  ._1w84vyng {
    display: none;
  }
}
._5kbvee0 {
  background: var(--affine-v2-layer-background-primary);
}
._5kbvee1 {
  transition: width 0.2s ease-in-out;
}
.cd7w3c0 {
  text-decoration: none;
  color: var(--affine-v2-text-link);
  white-space: wrap;
  word-break: break-all;
  display: inline;
}
.cd7w3c1 {
  border: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: wrap;
  word-break: break-all;
  padding: 6px;
  padding-left: 5px;
  overflow: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
.cd7w3c1::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
.cd7w3c1::placeholder {
  color: var(--affine-placeholder-color);
}
.cd7w3c2 {
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  position: relative;
  height: auto;
}
.cd7w3c3 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
.cd7w3c4 {
  position: relative;
  outline: 1px solid transparent;
  padding: 6px;
  display: block;
}
.cd7w3c4:focus-within {
  outline: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
.cd7w3c5 {
  border: none;
  white-space: wrap;
  word-break: break-all;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
.cd7w3c6 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
.cd7w3c7 {
  position: relative;
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
}
._2y2dza0 {
  color: var(--affine-v2-icon-primary);
  width: 20px;
  height: 20px;
}
.ggxbdi0 {
  width: 100%;
  height: 100%;
}
.qjmu0g0 {
  width: 100%;
  padding: 6px;
  min-height: 34px;
}
.qjmu0g1 {
  padding: 0px !important;
}
.gqt9uc0 {
  display: flex;
  flex-direction: column;
}
.gqt9uc1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gqt9uc2 {
  display: flex;
}
.gqt9uc3 {
  margin: 8px 0;
}
.gqt9uc4 {
  flex: 1;
}
.gqt9uc5 {
  max-width: 50%;
  font-size: var(--affine-font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--affine-v2-text-tertiary);
}
.gqt9uc6 {
  max-width: 110px;
  min-width: 60px;
}
.gqt9uc7 {
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gqt9uc8 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.gqt9uc9 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
._12iu4k20 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
  padding: 8px 16px;
  min-width: 200px;
  text-transform: uppercase;
}
._12iu4k21 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 200px;
}
._1c2qjy60 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._1c2qjy61 {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--onix-muted-foreground);
  font-size: 14px;
  font-weight: 500;
  padding: 0 6px;
  gap: 8px;
  justify-content: space-between;
}
._1c2qjy62 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: background-color 0.2s;
}
._1c2qjy62:hover {
  background-color: var(--onix-accent);
}
._1c2qjy62[data-active=true] {
  color: var(--onix-primary);
}
._1c2qjy63 {
  font-size: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--onix-border);
  background: var(--onix-secondary);
  cursor: pointer;
}
._1c2qjy63:hover:not([data-readonly=true]) {
  background-color: var(--onix-muted);
}
._1c2qjy63[data-readonly=true] {
  cursor: default;
}
._1c2qjy64 {
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
._1c2qjy65 {
  transform: translateX(4px);
}
._1c2qjy66 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
  padding: 8px 12px;
  min-width: 200px;
  text-transform: uppercase;
}
._1s41zt50 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
  padding: 8px 0px;
  min-width: 260px;
}
._1s41zt51 {
  padding: 8px 20px;
}
._1s41zt52 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  padding: 8px 4px;
  min-width: 260px;
}
._1s41zt53 {
  padding: 8px 20px;
}
._1s41zt54 {
  color: var(--onix-muted-foreground);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
._1s41zt55 {
  color: var(--onix-foreground);
  font-size: 14px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}
._1s41zt56 {
  padding: 10px 16px;
}
._17qinyo2 {
  --_17qinyo0: 160px;
  --_17qinyo1: 14px;
  width: 100%;
  font-family: inherit;
  padding-bottom: 18px;
}
._17qinyo2 :is(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
._17qinyo3 {
  display: flex;
  height: 30px;
  padding: 4px;
  margin-bottom: 8px;
  justify-content: space-between;
  align-items: center;
  color: var(--onix-muted-foreground);
  font-weight: 500;
}
._17qinyo4 {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  cursor: pointer;
  font-size: 20px;
}
._17qinyo5 {
  color: var(--onix-muted-foreground);
}
._17qinyo6 {
  padding: 0 6px;
  cursor: pointer;
  border-radius: 4px;
}
._17qinyo6:hover {
  background-color: var(--onix-accent);
}
._17qinyo7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
._17qinyo8 {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  cursor: default;
  padding: 0 6px;
}
._17qinyo9 {
  height: 0;
  border-top: 0.5px solid var(--onix-border);
  width: 100%;
  margin: 8px 0;
}
._17qinyoa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._17qinyob {
  display: flex;
  flex-direction: column;
  position: relative;
}
._17qinyoc {
  display: flex;
  flex-direction: row;
  padding-top: 2px;
}
[data-property-collapsed="true"] ._17qinyoc {
  display: none;
}
._17qinyod {
  font-size: 14px;
  color: var(--onix-muted-foreground);
  padding: 0 4px;
  height: 30px;
  font-weight: 400;
  gap: 6px;
  width: 160px;
  border-radius: 4px;
  justify-content: start;
}
._17qinyod svg {
  font-size: 16px;
  color: var(--onix-muted-foreground);
}
._17qinyod:hover svg {
  color: var(--onix-foreground);
}
._17qinyoe {
  opacity: 0;
}
._17qinyoc:hover ._17qinyoe {
  opacity: 1;
}
._17qinyof {
  transition: transform 0.2s ease-in-out;
}
._17qinyof[data-collapsed="true"] {
  transform: rotate(90deg);
}
._17qinyog {
  background: var(--onix-popover);
  max-width: calc(var(--affine-editor-width) / 2);
  width: 100%;
  max-height: 30vh;
  overflow-y: auto;
}
._17qinyoh:has([data-property-value][data-empty="true"]) {
  display: none;
}
@container viewport (width <= 640px) {
  ._17qinyo2 {
    --_17qinyo1: 12px;
  }
}
@media print {
  ._17qinyo3 {
    display: none;
  }
  ._17qinyo9 {
    display: none;
  }
  ._17qinyoa[data-state="open"] {
    margin-bottom: 32px;
  }
  ._17qinyod {
    display: none;
  }
}
._123tae50 {
  font-size: var(--affine-font-sm);
  display: flex;
  align-items: center;
  padding: 0px 4px 0 0;
  line-height: 22px;
  color: var(--affine-text-primary-color);
}
._123tae51 {
  font-size: var(--affine-font-sm);
  display: flex;
  align-items: center;
  padding: 0px 4px;
  line-height: 22px;
  height: 22px;
  color: var(--affine-text-primary-color);
}
._123tae51:has(>:hover) {
  cursor: pointer;
  background: var(--affine-hover-color);
  border-radius: 4px;
}
._123tae51:empty {
  display: none;
}
._123tae52 {
  color: var(--affine-v2-text-placeholder);
}
._123tae53 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._123tae54 {
  font-size: 18px;
  margin-right: 6px;
  padding: 1px 0;
  display: flex;
  align-items: center;
  color: var(--affine-icon-color);
}
._123tae55 {
  color: var(--affine-v2-status-error);
}
._123tae56 {
  color: var(--affine-v2-text-disable);
}
._123tae57 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
  padding: 0px 4px;
  line-height: 22px;
  transition: background 0.15s ease-in-out;
  display: flex;
  align-items: center;
  min-width: 18px;
}
._123tae57:hover {
  cursor: pointer;
  background: var(--affine-hover-color);
  border-radius: 4px;
}
._1hmr3hc0 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
._1hmr3hc1 {
  display: flex;
  border: 1px solid var(--affine-border-color);
  border-radius: 8px;
  background: var(--affine-white);
  padding: 4px 8px;
  gap: 4px;
  height: 32px;
  overflow: hidden;
  justify-content: space-between;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
}
._1hmr3hc1[data-draft="true"] {
  border-style: dashed;
}
._1hmr3hc2 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
}
._1hmr3hc3 {
  display: flex;
  flex-direction: row;
  margin: 2px 2px;
  align-items: center;
  gap: 4px;
}
._1hmr3hc4 {
  font-weight: 500;
  line-height: 22px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-primary-color);
}
._1hmr3hc4:first-child {
  margin-left: 12px;
}
._1hmr3hc5 {
  font-size: 20px;
  color: var(--affine-icon-color);
}
._1hmr3hc6 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-primary-color);
}
._1hmr3hc7 {
  width: 230px;
}
._1hmr3hc8 {
  height: 32px;
}
.t4a6k0 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.t4a6k1 {
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
  min-height: 64px;
}
.t4a6k2 {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 20px 20px 20px 24px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.2px;
}
.t4a6k3 {
  height: 0;
  flex: 1;
}
.t4a6k4 {
  border-top: 1px solid var(--affine-v2-layer-insideBorder-border);
  min-height: 64px;
  padding: 20px 24px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t4a6k5 {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 500;
}
.t4a6k6 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.t4a6k7 {
  color: var(--affine-primary-color);
}
.t4a6k8 {
  padding: 4px 18px;
}
.t4a6k9 {
  display: flex;
  gap: 20px;
}
.t4a6ka {
  padding: 4px 18px;
}
._25c0940 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
._25c0941 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 16px 16px 8px 16px;
}
._25c0942 {
  width: 100%;
}
._25c0943 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1h5rdzz0 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1h5rdzz1 {
  display: flex;
  gap: 8px;
  align-items: center;
}
._1h5rdzz2 {
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid var(--affine-v2-layer-insideBorder-border);
  flex-wrap: wrap;
  gap: 12px;
}
._1h5rdzz3 {
  border-top: 1px solid var(--affine-v2-layer-insideBorder-border);
}
._1h5rdzz4 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-text-secondary-color);
  padding: 8px;
  padding-bottom: 0;
}
._1h5rdzz5 {
  flex: 2;
  flex-direction: column;
  border-left: 1px solid var(--affine-v2-layer-insideBorder-border);
  overflow-x: hidden;
  overflow-y: auto;
}
._1h5rdzz6 {
  overflow: hidden;
  font-weight: 600;
}
._1h5rdzz7 {
  text-decoration: line-through;
}
._1h5rdzz8 {
  padding: 0 8px;
  color: var(--affine-text-secondary-color);
}
._1h5rdzz9 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
}
._1h5rdzza {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  background-color: var(--affine-background-primary-color);
  overflow: hidden;
  gap: 16px;
  white-space: nowrap;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 8px;
  padding: 4px 8px 4px;
}
._1h5rdzzb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 22px;
}
._1h5rdzzc {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
._1h5rdzzd {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
._1h5rdzze {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 16px 16px 8px 16px;
}
._1h5rdzzf {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
._1h5rdzzg {
  display: flex;
  overflow: hidden;
  flex: 1;
}
._1h5rdzzh {
  display: flex;
  flex-direction: column;
  height: 100%;
}
._1h5rdzzi {
  margin-left: 20px;
}
._1h5rdzzj {
  width: 100%;
}
._1h5rdzzk {
  color: var(--affine-primary-color);
}
._1h5rdzzl {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._1h5rdzzm {
  color: var(--affine-primary-color);
  font-style: italic;
  font-weight: 800;
}
._1h5rdzzn {
  padding: 4px 12px;
  border-radius: 8px;
}
._1h5rdzzo {
  min-width: 80px;
}
._1h5rdzzp {
  background-color: var(--affine-hover-color-filled);
}
._1h5rdzzq {
  padding: 20px 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 20px;
  line-height: 24px;
  color: var(--affine-text-secondary-color);
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.gik9y50 {
  width: 100%;
  max-width: var(--affine-editor-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--affine-editor-side-padding, 24);
  padding-right: var(--affine-editor-side-padding, 24);
  font-size: 14px;
}
.gik9y51 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gik9y52 {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: var(--onix-foreground);
}
.gik9y53 {
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
  text-align: center;
  font-size: 12px;
  line-height: 28px;
  font-weight: 500;
  color: var(--onix-foreground);
  cursor: pointer;
}
.gik9y54 {
  margin-bottom: 16px;
}
.gik9y55 {
  color: var(--onix-muted-foreground);
  height: 32px;
  line-height: 32px;
}
.gik9y56 {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  border-radius: 4px;
}
.gik9y56:hover {
  background-color: var(--onix-accent);
}
.gik9y56 .affine-reference-title {
  border-bottom: none;
}
.gik9y56 svg {
  color: var(--onix-muted-foreground);
}
.gik9y56:hover svg {
  color: var(--onix-foreground);
}
.gik9y57 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.gik9y58 {
  cursor: default;
  border: 0.5px solid var(--affine-v2-backlinks-blockBorder);
  border-radius: 8px;
  padding: 8px;
  color: var(--onix-foreground);
  font-family: inherit;
  background-color: var(--affine-v2-backlinks-blockBackgroundColor);
}
.gik9y58:hover {
  background-color: var(--affine-v2-backlinks-blockHover);
}
.gik9y58 * {
  cursor: default;
}
.gik9y59 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.gik9y5a {
  cursor: pointer;
}
.gik9y5b {
  transition: all 0.2s ease-in-out;
  color: var(--onix-foreground);
  font-size: 20px;
}
.gik9y5b[data-collapsed="true"] {
  transform: rotate(90deg);
  color: var(--onix-muted-foreground);
}
@media print {
  .gik9y50 {
    display: none;
  }
}
@container viewport (width <= 640px) {
  .gik9y50 {
    padding: 0 24px;
  }
}
._1gpb7pn0 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._1gpb7pn0[data-icon-type="emoji"], ._1gpb7pn0[data-icon-type="affine-icon"] {
  font-size: 60px;
  line-height: 1;
}
._1gpb7pn0[data-icon-type="emoji"] {
  font-family: Inter;
}
._1gpb7pn0::after {
  display: none;
}
._1gpb7pn1 {
  padding: 4px;
}
._1gpb7pn2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1gpb7pn3 {
  color: var(--onix-muted-foreground);
  font-size: 16px;
}
._1gpb7pn4 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
}
@media print {
  .doc-icon-container[data-has-icon="false"] {
    display: none;
  }
}
._1jywr2t0 {
  padding-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--onix-foreground);
}
._1jywr2t1 {
  display: flex;
  gap: 12px;
  align-items: center;
}
._1jywr2t2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 40px;
  background-color: var(--onix-card);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}
._1jywr2t2:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.04);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}
._1jywr2t2:hover:before {
  opacity: 1;
}
._1jywr2t2[data-active="true"]:before {
  opacity: 1;
}
._1jywr2t3 {
  font-size: 20px;
  line-height: 0;
  color: var(--onix-foreground);
}
._1jywr2t4 {
  color: var(--onix-primary);
}
._1jywr2t5 {
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}
.qi6ygm0 {
  width: calc(100% + 20px);
  padding: 10px 10px 20px 10px;
  margin-left: -10px;
}
.qi6ygm1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0px;
}
.qi6ygm2 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
.qi6ygm3 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  border: 1px solid var(--affine-v2-layer-insideBorder-blackBorder);
}
.qi6ygm4 {
  border-radius: 4px;
  padding: 8px 10px;
}
._1om5za50 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
._1hmcivi0 {
  font-weight: 500;
  color: var(--onix-foreground);
}
._1hmcivi0[data-editing="true"] {
  -webkit-app-region: no-drag;
}
._1wnpuix0 {
  max-width: 480px;
  min-width: 360px;
  padding: 20px 0;
  align-self: start;
  margin-top: 120px;
}
._1wnpuix1 {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 2px;
}
._1wnpuix2 {
  font-size: var(--affine-font-h-2);
  font-weight: 600;
  min-height: 42px;
  padding: 0;
}
._1wnpuix3 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  width: 160px;
}
._1wnpuix4 {
  max-height: calc(100vh - 220px);
  padding: 0 24px;
}
._1wnpuix5 {
  width: 6px;
  transform: translateX(-4px);
}
._1wnpuix6 {
  width: 0;
  height: 0;
  position: absolute;
}
._1wnpuix7 {
  margin-top: 20px;
  border-bottom: 4px;
}
._1wnpuix8 {
  display: flex;
  flex-direction: column;
  position: relative;
}
._1wnpuix9 {
  align-self: flex-start;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-secondary);
  padding: 0 4px;
  height: 36px;
  font-weight: 400;
  gap: 6px;
}
[data-property-collapsed="true"] ._1wnpuix9 {
  display: none;
}
._1wnpuix9 svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._1wnpuix9:hover svg {
  color: var(--affine-v2-icon-primary);
}
@media print {
  ._1wnpuix9 {
    display: none;
  }
}
._1vwpg7d0 {
  width: 100%;
  border-radius: 4px;
  color: var(--affine-v2-text-primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;
}
._1vwpg7d0:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1vwpg7d0 svg {
  color: var(--affine-v2-icon-secondary);
  font-size: 16px;
  transform: none;
}
._1vwpg7d0:hover svg {
  color: var(--affine-v2-icon-primary);
}
._1vwpg7d0 span {
  font-size: var(--affine-font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom-color: transparent;
}
._14b2iw30 {
  max-width: 480px;
  min-width: 360px;
  padding: 20px 0;
  align-self: start;
  margin-top: 120px;
  max-height: calc(100dvh - 240px);
  overflow: auto;
}
._14b2iw31 {
  display: flex;
  width: 100%;
  flex-direction: column;
}
._14b2iw32 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
}
._14b2iw33 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  width: 160px;
}
._14b2iw34 {
  max-height: calc(100vh - 220px);
  padding: 0 24px;
}
._14b2iw35 {
  width: 6px;
  transform: translateX(-4px);
}
._14b2iw36 {
  width: 0;
  height: 0;
  position: absolute;
}
._14b2iw37 {
  margin-top: 20px;
  border-bottom: 4px;
}
._14b2iw38 {
  display: flex;
  flex-direction: column;
  position: relative;
}
._14b2iw39 {
  align-self: flex-start;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-secondary);
  padding: 0 4px;
  height: 36px;
  font-weight: 400;
  gap: 6px;
}
[data-property-collapsed="true"] ._14b2iw39 {
  display: none;
}
._14b2iw39 svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._14b2iw39:hover svg {
  color: var(--affine-v2-icon-primary);
}
@media print {
  ._14b2iw39 {
    display: none;
  }
}
._10oetf40 {
  width: 100%;
}
._1stnf480 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--affine-v2-text-primary);
  padding: 16px;
}
._1stnf481 {
  width: 36px;
  height: 36px;
  color: var(--affine-v2-icon-primary);
}
._1stnf482 {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}
._1stnf483 {
  text-align: center;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 20px;
}
._1stnf484 {
  width: 100%;
  font-size: 14px;
  height: 42px;
}
._1stnf485 {
  max-width: 352px;
}
._1stnf486 {
  margin: 0 -16px;
  width: calc(100% + 32px);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  padding: 0 16px;
}
._1stnf487 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
}
._1stnf488 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
._1stnf489 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: 26px;
}
._1stnf48a {
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 24px;
  color: var(--affine-text-secondary-color);
}
._1stnf48b {
  width: 100%;
}
._1stnf48c {
  width: 100%;
  margin-top: 20px;
}
.alqzy70 {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  gap: 12px;
}
.alqzy71 {
  width: 100%;
  height: auto;
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: var(--affine-line-height);
}
.alqzy72 {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.alqzy73 {
  top: 24px;
  right: 24px;
}
.alqzy74 {
  width: 100%;
  height: auto;
  font-size: var(--affine-font-sm);
  line-height: var(--affine-line-height);
  font-weight: 400;
  color: var(--affine-text-secondary-color);
}
.alqzy75 {
  color: var(--affine-link-color);
  cursor: pointer;
}
.alqzy76 {
  width: 100%;
  font-size: var(--affine-font-base);
  line-height: var(--affine-line-height);
  font-weight: 400;
  color: var(--affine-text-primary-color);
}
.alqzy77 {
  width: 100%;
  font-size: var(--affine-font-sm);
  line-height: var(--affine-line-height);
  color: var(--affine-text-secondary-color);
}
.alqzy78 {
  width: 100%;
  max-height: 120px;
  overflow: auto;
  font-size: var(--affine-font-sm);
  line-height: var(--affine-line-height);
  color: var(--affine-text-secondary-color);
}
.alqzy79 {
  width: 100%;
  font-size: var(--affine-font-xs);
  line-height: var(--affine-line-height);
  color: var(--affine-text-secondary-color);
  overflow-wrap: anywhere;
}
.alqzy7a {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: end;
  margin-top: 20px;
}
.alqzy7b {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background: var(--affine-v2-button-secondary);
}
.alqzy7b:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
  cursor: pointer;
  transition: background .30s;
}
.alqzy7c {
  opacity: 0.5;
}
.alqzy7c:hover {
  background: var(--affine-v2-button-secondary);
  cursor: not-allowed;
}
.alqzy7d {
  display: flex;
  align-items: center;
  padding: 0 4px;
  text-align: left;
  flex: 1;
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-base);
  line-height: var(--affine-line-height);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.alqzy7e {
  margin-right: auto;
}
.alqzy7f {
  margin-left: auto;
}
._83ab430 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--affine-v2-text-primary);
  padding: 16px;
}
._83ab431 {
  width: 36px;
  height: 36px;
  color: var(--affine-v2-icon-primary);
}
._83ab432 {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}
._83ab433 {
  text-align: center;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 20px;
}
._83ab434 {
  width: 100%;
  font-size: 14px;
  height: 42px;
}
._83ab435 {
  max-width: 400px;
}
._83ab436 {
  margin: 0 -16px;
  width: calc(100% + 32px);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  padding: 6px;
}
._1nhglur0 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: var(--onix-foreground);
  border-radius: 4px;
}
._1nhglur0:hover {
  background: var(--onix-accent);
}
._1nhglur0.active {
  color: var(--onix-primary);
  cursor: default;
  pointer-events: none;
}
._1nhglur0.label {
  color: var(--onix-muted-foreground);
  font-size: 16px;
}
._1nhglur0.disabled {
  opacity: .4;
  cursor: default;
  color: var(--onix-muted-foreground);
  pointer-events: none;
}
._1nhglur0 > button {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  border: none;
}
._1nhglur0 > button:hover {
  color: inherit;
}
._1nhglur0.disabled > button {
  opacity: 1;
}
._1nhglur1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
._6dy16j0 {
  border-bottom: 1px solid var(--affine-border-color);
  padding-bottom: 16px;
  margin-bottom: 24px;
  white-space: pre-wrap;
}
._6dy16j0 .title {
  font-size: var(--affine-font-base);
  font-weight: 600;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
._6dy16j0 .subtitle {
  padding-top: 4px;
  padding-bottom: 8px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._6dy16j1 {
  border-bottom: 1px solid var(--affine-border-color);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
._6dy16j1:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
._6dy16j2 {
  opacity: 0.5;
  pointer-events: none;
}
._6dy16j1 .title {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 18px;
  color: var(--affine-text-secondary-color);
  margin-bottom: 16px;
}
._6dy16j3 {
  margin-bottom: 25px;
  color: var(--affine-text-primary-color);
  border-radius: 8px;
}
._6dy16j3.two-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._6dy16j3:last-of-type {
  margin-bottom: 0;
}
._6dy16j3.disabled {
  position: relative;
}
._6dy16j3.disabled::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}
._6dy16j3 .left-col {
  flex: 1;
  max-width: 100%;
}
._6dy16j3.two-col .left-col {
  flex-shrink: 0;
  max-width: 80%;
}
._6dy16j3 .name {
  margin-bottom: 2px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
}
._6dy16j3 .desc {
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
}
._6dy16j3 .right-col {
  display: flex;
  justify-content: flex-end;
  padding-left: 15px;
  flex-shrink: 0;
}
._6dy16j4 {
  font-size: var(--affine-font-xs);
  background: var(--affine-v2-chip-label-blue);
  padding: 0 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}
._1a5j7sg0 {
  font-weight: 500;
  font-size: 15px;
}
._1a5j7sg1 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
  line-height: 22px;
}
._1a5j7sg2.plain {
  color: var(--affine-brand-color);
}
._1a5j7sg3.plain {
  color: var(--affine-text-primary-color);
}
._14zypx50 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._14zypx51 {
  flex-grow: 1;
  margin-right: 20px;
}
._14zypx51 .storage-progress-desc {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
._14zypx51 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--onix-border);
  overflow: hidden;
}
._14zypx52 {
  height: 100%;
}
._1nick9k0 {
  margin-left: 20px;
}
._1nick9k0 label {
  display: block;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  margin-bottom: 4px;
}
._1nick9k1 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
._1nick9k1.disable {
  cursor: default;
  pointer-events: none;
}
._1nick9k1:hover .camera-icon-wrapper {
  display: flex;
}
._1nick9k1 .camera-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(60, 61, 63, 0.5);
  z-index: 1;
  color: var(--affine-white);
  font-size: 22px;
}
._1nick9k2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
._1nick9k3 {
  padding-left: 0;
  padding-right: 0;
}
._1nick9k4 {
  margin-top: 12px;
}
._1572yo50 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1572yo51 {
  margin-left: calc(-1 * var(--setting-modal-gap-x));
  padding-left: var(--setting-modal-gap-x);
  width: var(--setting-modal-width);
  overflow-x: auto;
  padding-bottom: 21px;
  padding-top: 21px;
  margin-top: -21px;
}
._1572yo52 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  height: 9px;
  width: 100%;
}
._1572yo53 {
  --radix-scroll-area-thumb-height: 4px;
  background: var(--onix-muted-foreground);
  opacity: 0.6;
  overflow: hidden;
  height: 4px;
  border-radius: 4px;
}
._1572yo54 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--onix-primary);
  background: transparent;
  border-color: transparent;
  font-size: 12px;
}
._1572yo55 {
  display: flex;
  align-items: start;
  margin-bottom: 8px;
}
._1572yo56 {
  width: 0;
  flex: 1;
}
._1572yo57 {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
}
._1572yo58 {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._1b79qoa0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 4px;
}
._1b79qoa1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._1b79qoa2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1b79qoa3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
._1b79qoa4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1b79qoa5 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background: var(--onix-background);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
._1b79qoa5[data-interactive="true"] {
  cursor: pointer;
}
._1b79qoa5[data-interactive="true"]:hover {
  background: var(--onix-accent);
  border-color: var(--onix-border);
}
._1b79qoa5[data-interactive="true"]:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1b79qoa6 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
._1b79qoa7 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--onix-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-muted-foreground);
}
._1b79qoa8 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1b79qoa9 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1b79qoaa {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._1b79qoab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-destructive);
}
._1b79qoac {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--onix-destructive);
}
._1b79qoad {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
._1b79qoae {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
._1b79qoaf {
  font-size: 11px;
  line-height: 16px;
  color: var(--onix-muted-foreground);
}
._1b79qoag {
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  padding: 12px 0;
}
._1b79qoah {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
._1b79qoai {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._1b79qoaj {
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._1b79qoak {
  width: 100%;
  justify-content: space-between;
}
._1b79qoal {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._1b79qoam {
  color: var(--onix-foreground);
  text-decoration: underline;
}
._1b79qoam:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1b79qoan {
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-destructive);
}
._1b79qoao {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
._37eewr0 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._37eewr1 {
  border: 1px solid var(--onix-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--onix-background);
}
._37eewr2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onix-border);
}
._37eewr3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._37eewr4 {
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._37eewr5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 20px;
  text-align: center;
}
._37eewr6 {
  display: flex;
  flex-direction: column;
}
._37eewr7 {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onix-border);
}
._37eewr7:last-child {
  border-bottom: 0;
}
._37eewr8 {
  grid-template-columns: 32px 1fr;
}
._37eewr9 {
  opacity: 0.48;
  background: var(--onix-card);
}
._37eewra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--onix-muted-foreground);
  background: var(--onix-card);
}
._37eewrb {
  color: var(--onix-primary);
  background: var(--affine-v2-chip-label-blue);
}
._37eewrc {
  width: 16px;
  height: 16px;
}
._37eewrd {
  opacity: 0.55;
  background: var(--onix-card);
}
._37eewre {
  color: var(--onix-muted-foreground);
  cursor: grab;
  text-align: center;
}
._37eewrf {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._37eewrg {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._37eewrh {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._37eewri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
._37eewrj {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  color: var(--onix-muted-foreground);
  background: var(--onix-card);
}
._37eewrk {
  color: var(--onix-destructive);
  background: color-mix(in srgb, var(--onix-destructive) 10%, transparent);
}
._37eewrl {
  display: flex;
  align-items: center;
  gap: 8px;
}
._37eewrm {
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--onix-border);
  background: var(--onix-card);
}
._37eewrn {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--onix-card);
  border: 1px solid var(--onix-border);
}
._37eewro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: min(720px, calc(100vh - 180px));
  overflow-y: auto;
  padding-right: 2px;
}
._37eewrp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._37eewrq {
  height: auto;
}
._37eewrr {
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._37eewrs {
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._37eewrt {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  padding: 0 10px;
  font-size: 14px;
  line-height: 22px;
  background: var(--onix-background);
  color: var(--onix-foreground);
  outline: none;
}
._37eewrt::-moz-placeholder {
  color: var(--onix-muted-foreground);
}
._37eewrt::placeholder {
  color: var(--onix-muted-foreground);
}
._37eewrt:focus {
  border-color: var(--onix-primary);
  box-shadow: 0px 0px 0px 2px var(--onix-ring);
}
._37eewru {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  position: sticky;
  bottom: 0;
  padding-top: 12px;
  background: var(--onix-background);
}
._37eewrv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--onix-border);
  border-radius: 10px;
}
._37eewrw {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
._37eewrx {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._37eewry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
._37eewrz {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 76px;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--onix-border);
  border-radius: 8px;
  color: var(--onix-foreground);
  font-size: 14px;
  cursor: pointer;
}
._37eewrz:has(input:checked) {
  border-color: var(--onix-primary);
  background: var(--onix-card);
}
._37eewrz:has(input:focus-visible) {
  box-shadow: 0px 0px 0px 2px var(--onix-ring);
}
._37eewrz[data-disabled="true"] {
  cursor: not-allowed;
  color: var(--onix-muted-foreground);
  background: var(--onix-card);
}
._37eewr10 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
._37eewr11 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  line-height: 20px;
}
._37eewr12 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
}
._37eewrz[data-disabled="true"] ._37eewr12 {
  color: var(--onix-muted-foreground);
}
._37eewr13 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--onix-foreground);
}
._37eewr14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._37eewr15 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
._37eewr16 {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--onix-card);
  color: var(--onix-foreground);
  font-size: 14px;
}
._37eewr17 {
  opacity: 0.58;
}
._37eewr18 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-muted-foreground);
  cursor: grab;
}
._37eewr19 {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
._37eewr1a {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  white-space: nowrap;
}
._37eewr1b {
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--onix-primary);
  background: var(--affine-v2-chip-label-blue);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}
._37eewr1c {
  padding: 24px 16px;
  border-radius: 8px;
  text-align: center;
  color: var(--onix-muted-foreground);
  background: var(--onix-card);
  font-size: 12px;
}
._37eewr1d {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(440px, calc(100dvh - 220px));
  overflow-y: auto;
}
._37eewr1e {
  margin: 0 0 12px;
  color: var(--onix-muted-foreground);
  font-size: 14px;
  line-height: 20px;
}
._37eewr1f {
  flex-shrink: 0;
}
._37eewr1g {
  color: var(--onix-muted-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
._37eewr1h {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}
._37eewr1i {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--onix-card);
  color: var(--onix-foreground);
  font-size: 14px;
  cursor: pointer;
}
._37eewr1i[data-selected="true"] {
  border-color: var(--onix-primary);
  background: var(--affine-v2-chip-label-blue);
}
._37eewr1j {
  flex: 0 0 auto;
  font-size: 16px;
}
._37eewr1k {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
._37eewr1l {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
}
._37eewr1m {
  overflow: hidden;
  color: var(--onix-muted-foreground);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._37eewr1n {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
._37eewr1o {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 16px;
       column-gap: 16px;
  row-gap: 4px;
  margin-top: 8px;
}
._37eewr1p {
  width: 100%;
  min-height: 28px;
  gap: 8px;
  color: var(--onix-foreground);
  font-size: 16px;
  line-height: 20px;
}
._37eewr1q {
  font-size: 14px;
}
._37eewr1r {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--onix-border);
}
._37eewr1s {
  color: var(--onix-muted-foreground);
  font-size: 14px;
}
._37eewr1t {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
._37eewr1u {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._37eewr1v {
  margin-right: auto;
  font-size: 12px;
}
._37eewr1w {
  color: var(--onix-destructive);
}
._37eewr1x {
  color: var(--onix-success);
}
._37eewr1y {
  display: grid;
  grid-template-columns: repeat(30, minmax(4px, 1fr));
  align-items: end;
  gap: 4px;
  height: 140px;
  padding: 16px 16px 24px;
}
._37eewr1z {
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--onix-primary);
}
@media (max-width: 600px) {
  ._37eewr1o {
    grid-template-columns: 1fr;
  }
}
._1cnlrhs0 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
  width: 100%;
  color: var(--onix-foreground);
}
._1cnlrhs1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
._1cnlrhs2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._1cnlrhs3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--onix-foreground);
}
._1cnlrhs4 {
  font-size: 13px;
  color: var(--onix-muted-foreground);
  line-height: 1.5;
}
._1cnlrhs5 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: color-mix(in srgb, var(--onix-info) 12%, transparent);
  color: var(--onix-info);
}
._1cnlrhs6 {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-background);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1cnlrhs7 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
._1cnlrhs8 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1cnlrhs9 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
._1cnlrhs9:hover {
  border-color: var(--onix-primary);
}
._1cnlrhsa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._1cnlrhsb {
  display: flex;
  align-items: center;
  gap: 14px;
}
._1cnlrhsc {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--onix-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-primary);
  font-size: 20px;
  flex-shrink: 0;
}
._1cnlrhsd {
  font-size: 15px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhse {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  margin-top: 2px;
  line-height: 1.4;
}
._1cnlrhsf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--onix-border);
  font-size: 12px;
}
._1cnlrhsg {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
._1cnlrhsh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background-color: var(--onix-accent);
  color: var(--onix-muted-foreground);
}
._1cnlrhsi {
  background-color: color-mix(in srgb, var(--onix-success) 12%, transparent);
  color: var(--onix-success);
  font-weight: 600;
}
._1cnlrhsj {
  background-color: color-mix(in srgb, var(--onix-warning) 14%, transparent);
  color: var(--onix-warning);
  font-weight: 600;
}
._1cnlrhsk {
  font-size: 12px;
  font-weight: 600;
  color: var(--onix-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}
._1cnlrhsk:hover {
  text-decoration: underline;
}
._1cnlrhsl {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
  font-size: 12px;
  line-height: 1.5;
  color: var(--onix-muted-foreground);
  display: flex;
  align-items: center;
  gap: 10px;
}
._1cnlrhsm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
._1cnlrhsn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
}
._1cnlrhso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1cnlrhsp {
  font-size: 16px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhsq {
  font-size: 11px;
  color: var(--onix-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1cnlrhsr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
._1cnlrhss {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
  color: var(--onix-muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
}
._1cnlrhss:hover {
  background-color: var(--onix-accent);
  color: var(--onix-foreground);
}
._1cnlrhst {
  background-color: var(--onix-primary);
  border-color: var(--onix-primary);
  color: var(--onix-primary-foreground);
  font-weight: 600;
}
._1cnlrhst:hover {
  background-color: var(--onix-primary);
  color: var(--onix-primary-foreground);
}
._1cnlrhsu {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1cnlrhsv {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  transition: all 150ms ease;
  cursor: pointer;
}
._1cnlrhsv:hover {
  border-color: var(--onix-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
._1cnlrhsw {
  font-size: 15px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhsx {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
._1cnlrhsy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--onix-border);
}
._1cnlrhsz {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._1cnlrhs10 {
  font-size: 11px;
  color: var(--onix-muted-foreground);
}
._1cnlrhs11 {
  font-size: 13px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhs12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--onix-border);
}
._1cnlrhs13 {
  font-size: 18px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhs14 {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--onix-secondary);
  border: 1px solid var(--onix-border);
  width: 100%;
}
._1cnlrhs15 {
  background-color: #3b82f6;
}
._1cnlrhs16 {
  background-color: #10b981;
}
._1cnlrhs17 {
  background-color: #f59e0b;
}
._1cnlrhs18 {
  background-color: #8b5cf6;
}
._1cnlrhs19 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1cnlrhs1a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--onix-border);
  border-radius: 8px;
  background-color: var(--onix-card);
}
._1cnlrhs1b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
._1cnlrhs1c {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
._1cnlrhs1d {
  font-size: 13px;
  font-weight: 600;
  color: var(--onix-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1cnlrhs1e {
  font-size: 11px;
  color: var(--onix-muted-foreground);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
._1cnlrhs1f {
  display: flex;
  align-items: center;
  gap: 6px;
}
._1cnlrhs1g {
  font-size: 11px;
  color: var(--onix-destructive-foreground);
  line-height: 1.4;
  word-break: break-word;
}
._1cnlrhs1h {
  font-size: 12px;
  color: var(--onix-destructive);
  padding: 6px 8px;
  border: 1px solid var(--onix-border);
  border-radius: 6px;
  background-color: var(--onix-card);
}
._1cnlrhs1i {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  padding: 8px 0;
}
._1cnlrhs1j {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1cnlrhs1k {
  font-size: 13px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1cnlrhs1l {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
._1cnlrhs1m {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--onix-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--onix-foreground);
  background-color: var(--onix-background);
  flex-wrap: wrap;
}
._1cnlrhs1n {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
._1cnlrhs1o {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
._1cnlrhs1p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--onix-muted-foreground);
}
._1cnlrhs1q {
  font-size: 11px;
  color: var(--onix-muted-foreground);
  font-style: italic;
  line-height: 1.4;
}
._1cnlrhs1r {
  padding: 14px;
}
._1cnlrhs1s {
  font-size: 13px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1cnlrhs1t {
  margin-top: 8px;
}
._1cnlrhs1u {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
._1cnlrhs1v {
  display: grid;
  gap: 6px;
}
._1cnlrhs1w {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
._1cnlrhs1x {
  font-family: monospace;
  font-size: 12px;
  color: var(--onix-foreground);
}
._1cnlrhs1y {
  margin-top: 10px;
}
._1cnlrhs1z {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
._1u4y6st0 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
  width: 100%;
  color: var(--onix-foreground);
}
._1u4y6st1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
._1u4y6st2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
._1u4y6st3 {
  font-size: 13px;
  color: var(--onix-muted-foreground);
  margin-top: 4px;
}
._1u4y6st4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
  position: relative;
  overflow: hidden;
}
._1u4y6st5 {
  display: flex;
  align-items: center;
  gap: 12px;
}
._1u4y6st6 {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--onix-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-primary);
  font-size: 20px;
}
._1u4y6st7 {
  font-size: 16px;
  font-weight: 600;
}
._1u4y6st8 {
  font-size: 13px;
  color: var(--onix-muted-foreground);
  line-height: 1.5;
}
._1u4y6st9 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
._1u4y6sta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  background-color: var(--onix-background);
  border: 1px solid var(--onix-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1u4y6stb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
._1u4y6stc {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
._1u4y6std {
  display: flex;
  align-items: center;
  gap: 10px;
}
._1u4y6ste {
  font-weight: 600;
  font-size: 13px;
}
._1u4y6stf {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  margin-left: 6px;
}
._1u4y6stg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1u4y6sth {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background-color: color-mix(in srgb, var(--onix-success) 10%, transparent);
  color: var(--onix-success);
  text-transform: uppercase;
}
._1u4y6sti {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--onix-info);
}
._1u4y6stj {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
._1u4y6stk {
  font-size: 12px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1u4y6stl {
  font-size: 11px;
  color: var(--onix-muted-foreground);
  margin-top: 2px;
}
._1u4y6stm {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-background);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1u4y6stn {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
  margin: 0 0 4px 0;
}
._1u4y6sto {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  margin: 0;
}
._1u4y6stp {
  padding: 20px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--onix-destructive) 30%, transparent);
  background-color: color-mix(in srgb, var(--onix-destructive) 3%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
._1u4y6stq {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-destructive);
  margin: 0 0 4px 0;
}
._1u4y6str {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  margin-bottom: 6px;
}
._1u4y6sts {
  cursor: pointer;
}
._1u4y6sts:hover {
  color: var(--onix-foreground);
}
._1u4y6stt {
  color: var(--onix-border);
}
._1u4y6stu {
  color: var(--onix-foreground);
  font-weight: 600;
}
._1u4y6stv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--onix-success);
}
._1u4y6stw {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--onix-muted-foreground);
}
._1u4y6stx {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--onix-muted-foreground);
  margin-left: 6px;
}
._1u4y6sty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1u4y6stz {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
._1u4y6st10 {
  opacity: 0.75;
  transition: opacity 150ms ease, background-color 150ms ease;
}
._1u4y6st10:hover {
  opacity: 1;
}
._1u4y6st11 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--onix-border);
  background-color: var(--onix-secondary);
}
._1u4y6st12 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
._1u4y6st13 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}
._1u4y6st14 {
  font-size: 11px;
  color: var(--onix-muted-foreground);
  font-weight: 600;
}
._1u4y6st15 {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--onix-border);
  background-color: var(--onix-background);
  color: var(--onix-foreground);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
._1u4y6st15:hover {
  background-color: var(--onix-accent);
}
._1u4y6st16 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
._1u4y6st17 {
  width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
._1u4y6st18 {
  width: 310px;
  padding: 8px;
}
._1u4y6st19 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: var(--onix-foreground);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
._1u4y6st19:hover {
  background-color: var(--onix-accent);
}
._1u4y6st1a {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--onix-border);
  flex-shrink: 0;
}
._1u4y6st1b {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
._1u4y6st1c {
  width: 36px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--onix-border);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1u4y6st1c:hover {
  background-color: var(--onix-accent);
}
.mz8qgm0 {
  height: 18px;
  display: flex;
  align-items: center;
  color: var(--onix-foreground);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.mz8qgm0:last-of-type {
  margin-bottom: 0;
}
.mz8qgm0:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.mz8qgm0 .icon {
  color: var(--onix-muted-foreground);
  font-size: 15px;
  margin-left: 5px;
}
.mz8qgm1 {
  display: grid;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  gap: 2%;
}
.mz8qgm2 {
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  color: var(--onix-foreground);
  cursor: pointer;
  padding: 6px 8px;
}
.mz8qgm2:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.mz8qgm2 svg {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 2px;
}
.mz8qgm2 p {
  font-size: 12px;
  text-align: center;
}
.mz8qgm3 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.mz8qgm3.active {
  color: var(--onix-primary);
}
.mz8qgm3.error {
  color: var(--onix-destructive);
}
.mz8qgm3 svg {
  margin-right: 4px;
}
.mz8qgm4 {
  flex-direction: row-reverse;
}
.mz8qgm4.two-col {
  justify-content: flex-end;
}
.mz8qgm4 .right-col {
  padding-left: 0;
  padding-right: 20px;
}
.mz8qgm5 {
  margin-top: 12px;
}
._550dyb0 {
  background: var(--affine-white);
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._550dyb1 {
  color: var(--affine-text-primary-color);
}
._550dyb1[data-selected=true] {
  color: var(--affine-primary-color);
}
._550dyb2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 8px;
}
._1w5os2p0 {
  background: var(--onix-popover);
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._1w5os2p1 {
  color: var(--onix-foreground);
}
._1w5os2p1[data-selected=true] {
  color: var(--onix-primary);
}
.cavh450 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
  max-width: 250px;
}
._13xfuze0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  background: var(--onix-background);
  border: 1px solid var(--onix-border);
  overflow: hidden;
}
._13xfuze1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._13xfuze2 {
  display: flex;
  padding: 8px 8px 8px 16px;
  height: 60px;
  align-items: center;
  gap: 12px;
}
._13xfuze2:hover {
  background: var(--onix-accent);
}
._13xfuze2:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
._13xfuze3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._13xfuze4 {
  flex: 1;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
._13xfuze5 {
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._13xfuze6 {
  flex: 1;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
._13xfuze7 {
  padding-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-muted-foreground);
  font-size: 14px;
}
._13xfuze8 {
  padding-bottom: 4px;
}
._1rds9bf1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
._1rds9bf2 {
  width: 100%;
}
._1rds9bf3 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
}
._1rds9bf4 {
  flex: 1 0 0;
}
._1rds9bf5 {
  width: auto !important;
}
._1rds9bf6 {
  font-size: 18px;
  font-weight: 600;
}
._1rds9bf7 {
  font-size: 15px;
}
._1rds9bf8 {
  margin-top: 24px;
}
._1rds9bf9 {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.dangerous-setting .name {
  color: var(--onix-destructive);
}
._1rds9bfa {
  color: var(--onix-muted-foreground);
  font-size: 12px;
}
._1rds9bfb {
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-primary);
  cursor: pointer;
}
._1rds9bfc {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1rds9bfd {
  display: flex;
  flex-direction: column;
  min-height: 72px;
  align-items: center;
  justify-content: center;
}
._1rds9bfe {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
._1rds9bff {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--onix-foreground);
}
._1rds9bfg {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
}
._1rds9bfg > a {
  color: var(--onix-primary);
  font-weight: 500;
}
._1rds9bfh {
  display: flex;
  flex-direction: column;
  align-items: end;
}
._1rds9bfi {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--onix-foreground);
}
._1rds9bfj {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1rds9bfk {
  display: flex;
  align-items: center;
  gap: 16px;
}
._1rds9bfl {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
  line-height: 22px;
}
._12h5vm90 {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
._12h5vm91 {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._12h5vm92 {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-primary);
}
._12h5vm93 {
  font-size: 12px;
  line-height: 20px;
  display: flex;
  gap: 8px;
}
._12h5vm93 > span {
  color: var(--onix-muted-foreground);
}
._12h5vm94 {
  padding-right: calc(var(--setting-modal-gap-x) + 30px);
  display: flex;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
._12h5vm95 {
  min-height: 426px;
  min-width: 258px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.23s ease;
}
._12h5vm95::before {
  content: "";
  position: absolute;
  right: calc(100% + var(--setting-modal-gap-x));
  scroll-snap-align: start;
}
._12h5vm95[data-current="true"] {
  border-color: transparent;
}
._12h5vm96 {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
._12h5vm96::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--onix-primary), color-mix(in srgb, var(--onix-primary) 20%, transparent)) border-box;
  -webkit-mask: linear-gradient(white 0 0) padding-box, linear-gradient(white 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.23s ease;
}
._12h5vm95[data-current="true"] ._12h5vm96::after {
  opacity: 1;
}
._12h5vm98 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--onix-card);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--onix-border);
  font-weight: 600;
  overflow: hidden;
  position: relative;
}
._12h5vm98 > :not(._12h5vm99) {
  position: relative;
}
._12h5vm9a {
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
}
._12h5vm9b {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  margin-bottom: 8px;
}
._12h5vm9c {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  height: 20px;
}
._12h5vm9d {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  margin-left: 4px;
}
._12h5vm9e {
  width: 100%;
}
._12h5vm9g[data-show-hover="true"], ._12h5vm9f:hover ._12h5vm9g[data-show-hover="false"] {
  display: none;
}
._12h5vm9g[data-show-hover="false"], ._12h5vm9f:hover ._12h5vm9g[data-show-hover="true"] {
  display: block;
}
._12h5vm9h {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}
._12h5vm9i {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._12h5vm9j {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._12h5vm9k {
  display: flex;
  gap: 8px;
  line-height: 20px;
  align-items: normal;
}
._12h5vm9l {
  display: flex;
  align-items: center;
  height: 20px;
}
._12h5vm9l > svg {
  color: var(--onix-primary);
}
._12h5vm9m {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--onix-foreground);
  font-size: 12px;
}
._12h5vm9n {
  padding: 12px 0 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._12h5vm9o {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--onix-foreground);
}
._12h5vm9p {
  font-size: 14px;
  line-height: 22px;
  color: var(--onix-muted-foreground);
}
._12h5vm9q {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 20px;
}
._12h5vm9r {
  color: var(--onix-primary);
}
._12h5vm9s {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  line-height: 20px;
}
._12h5vm9t {
  text-decoration: underline;
}
._1bu9h760 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
  max-width: 250px;
}
._1bu9h761 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 100px;
  max-width: 250px;
}
._1bu9h762 {
  background: var(--onix-popover);
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._1bu9h763 {
  text-transform: capitalize;
  font-weight: 600;
  width: 250px;
}
._1bu9h764 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
._1bu9h765 {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
}
._1bu9h766 {
  position: absolute;
  top: 0;
  left: 0;
}
._1bu9h767 {
  width: 100%;
  height: 180px;
  border: 1px solid var(--onix-border);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._1bu9h768 {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--onix-muted-foreground);
  background-color: color-mix(in srgb, var(--onix-foreground) 5%, transparent);
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 1;
  height: 24px;
}
._1bu9h769 {
  position: relative;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
._1bu9h76a {
  box-shadow: none;
  background-color: var(--onix-muted);
}
._1bu9h76b {
  display: flex;
  align-items: center;
  padding: 4px;
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
}
._1bu9h76c {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
._1bu9h76c::-moz-placeholder {
  color: var(--onix-muted-foreground);
}
._1bu9h76c::placeholder {
  color: var(--onix-muted-foreground);
}
._1bu9h76c:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1bu9h76d {
  color: var(--onix-muted-foreground);
  font-size: 20px;
}
._1bu9h76e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
._1bu9h76f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._1bu9h76g {
  display: inline-flex;
  align-items: center;
  color: var(--onix-foreground);
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  line-height: normal;
  height: 22px;
}
._1bu9h76g.secondary {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  height: 20px;
}
._1bu9h76h {
  color: var(--onix-primary);
  margin-left: 8px;
}
._1bu9h76i {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  padding: 4px;
}
._1bu9h76j {
  color: var(--onix-destructive);
}
._1bu9h76k {
  color: var(--onix-primary);
  font-size: inherit;
}
._1bu9h76l {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 250px;
}
._1bu9h76m {
  flex: 1;
}
._1bu9h76n {
  font-size: 14px;
  color: var(--onix-muted-foreground);
  min-width: 40px;
  text-align: right;
}
._134djdx0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._134djdx1 {
  color: var(--onix-primary);
  cursor: pointer;
  margin-left: 4px;
}
._134djdx1:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._134djdx2 {
  color: var(--onix-destructive);
}
._134djdx3 {
  color: var(--onix-primary);
}
._1bch2gs0 {
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
._1bch2gs1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1bch2gs2 {
  display: flex;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  white-space: pre-wrap;
  position: relative;
}
._1bch2gs3 {
  display: inline-flex;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  white-space: pre-wrap;
  color: var(--onix-muted-foreground);
}
._1bch2gs4 {
  font-size: 12px;
  background: var(--affine-v2-chip-label-blue);
  padding: 0 8px;
  border-radius: 4px;
  position: absolute;
  right: 32px;
  top: 0;
}
._1bch2gs5 {
  display: flex;
  align-items: center;
  height: 100px;
  margin: 20px 0;
}
._1bch2gs6 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
._1bch2gs7 {
  font-size: 14px;
  line-height: 24px;
  white-space: pre-wrap;
}
._1bch2gs7 strong {
  font-weight: 600;
}
._1bch2gs7 ul {
  padding: 12px 0;
  margin-left: 15px;
}
._1bch2gs7 li {
  list-style-type: disc;
  padding: 6px 0;
}
._1bch2gs7 li::marker {
  color: var(--onix-primary);
}
._1bch2gs8 {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1bch2gs9 {
  width: 16px;
  height: 16px;
  color: var(--onix-muted-foreground);
}
._1bch2gsa {
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._1bch2gsb {
  margin-top: auto;
  align-self: center;
}
._1bch2gsa strong {
  font-weight: 700;
}
.w1nc1i0 {
  color: var(--onix-destructive);
}
._1y95uhy0 {
  border: 1px solid var(--onix-border);
  border-radius: 16px;
  padding: 36px;
}
._1y95uhy1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
._1y95uhy2 {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-primary);
}
._1y95uhy3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: var(--onix-foreground);
}
._1y95uhy4 {
  color: var(--onix-foreground);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
}
._1y95uhy5 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
  margin-bottom: 24px;
}
._1y95uhy6 {
  display: flex;
  gap: 12px;
}
._1y95uhy7 {
  min-width: 160px;
  height: 37px;
  border-radius: 18px;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -1%;
}
._1y95uhy8 {
  color: var(--onix-primary);
  padding-left: 16px;
  padding-right: 16px;
}
._1y95uhy9 {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._1y95uhy9 > a {
  color: var(--onix-foreground);
  text-decoration: underline;
}
._1y95uhya {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1y95uhyb {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1y95uhyc {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--onix-foreground);
  display: flex;
  align-items: center;
  gap: 4px;
}
._1y95uhyc > svg {
  color: var(--onix-primary);
  width: 20px;
  height: 20px;
}
._1y95uhyd {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1y95uhye {
  font-weight: 400;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  line-height: 24px;
  padding-left: 22px;
  position: relative;
}
._1y95uhye::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  position: absolute;
  left: 10px;
  top: 10px;
}
._15k93rs0 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._15k93rs1 {
  margin-left: calc(-1 * var(--setting-modal-gap-x));
  padding-left: var(--setting-modal-gap-x);
  width: var(--setting-modal-width);
  overflow-x: auto;
  padding-bottom: 21px;
  padding-top: 21px;
  margin-top: -21px;
}
._15k93rs2 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  height: 9px;
  width: 100%;
}
._15k93rs3 {
  --radix-scroll-area-thumb-height: 4px;
  background: var(--onix-muted-foreground);
  opacity: 0.6;
  overflow: hidden;
  height: 4px;
  border-radius: 4px;
}
._15k93rs4 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--onix-primary);
  background: transparent;
  border-color: transparent;
  font-size: 12px;
}
._15k93rs4:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._15k93rs5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
._15k93rs6 {
  opacity: 0;
}
[data-cloud-visible] ._15k93rs6 {
  opacity: 1;
}
.rdmwwq2 {
  position: relative;
  width: 100%;
  min-height: 200px;
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--onix-border);
  overflow: hidden;
  background: var(--onix-card);
}
.rdmwwq3 {
  position: relative;
  z-index: 3;
}
.rdmwwq4 {
  --dot: #E0E0E0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.2px);
  background-size: 12px 12px;
  background-repeat: repeat;
}
.rdmwwq4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-theme="dark"] .rdmwwq4 {
  --dot: rgba(255,255,255,0.1);
}
.rdmwwq2[data-type="1"] .rdmwwq4::after {
  background: linear-gradient(231deg, transparent 0%, var(--onix-card) 80%);
}
.rdmwwq2[data-type="2"] .rdmwwq4::after {
  background: linear-gradient(290deg, transparent 0%, var(--onix-card) 40%);
}
.rdmwwq4 > svg.affine-svg {
  --rdmwwq0: white;
  --rdmwwq1: white;
  position: absolute;
  z-index: 0;
}
[data-theme='dark'] .rdmwwq4 > svg.affine-svg {
  --rdmwwq0: #8C8C8C;
  --rdmwwq1: #262626;
}
 .rdmwwq4 > svg.icons-svg {
  color: rgba(0,0,0,0.1);
  position: absolute;
  z-index: 2;
}
[data-theme='dark'] .rdmwwq4 > svg.icons-svg {
  color: transparent;
}
.rdmwwq2[data-type="1"] .rdmwwq4 > svg.affine-svg {
  right: -150px;
  top: -100px;
}
.rdmwwq2[data-type="1"] .rdmwwq4 > svg.icons-svg {
  right: -20px;
  top: 130px;
  opacity: 0.5;
}
.rdmwwq2[data-type="2"] .rdmwwq4 > svg.affine-svg {
  position: absolute;
  right: -140px;
  bottom: -130px;
  transform: scale(0.58);
}
.rdmwwq2[data-type="2"] .rdmwwq4 > svg.icons-svg {
  position: absolute;
  right: 148px;
  bottom: 16px;
  opacity: 0.5;
}
.rdmwwq2[data-type="2"] .rdmwwq4 > svg.icons-svg .star {
  display: none;
}
.hpuv9g0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hpuv9g1 {
  display: flex;
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}
.hpuv9g1 svg {
  width: 20px;
  height: 20px;
  color: var(--onix-primary);
}
.ub5c9h0 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--onix-muted-foreground);
  margin-bottom: 8px;
}
.ub5c9h1 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--onix-foreground);
  margin-bottom: 4px;
}
.ub5c9h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: var(--onix-primary);
  margin-bottom: 24px;
}
.ub5c9h3 {
  width: auto;
  height: 36px;
  margin-bottom: 8px;
  padding: 8px 18px;
}
.ub5c9h4 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 16px;
  max-width: 324px;
}
.ub5c9h5 {
  color: inherit;
  cursor: text;
}
.ub5c9h5:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.dp378b0 {
  height: 32px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
.dp378b0:last-of-type {
  margin-bottom: 0;
}
.dp378b1 {
  display: flex;
}
.dp378b2 {
  min-width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--onix-muted);
  font-size: 12px;
}
.dp378b2:not(:last-of-type) {
  margin-right: 2px;
}
._1829hio0 {
  margin-top: 24px;
}
._1829hio1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
._1829hio2 {
  width: 100%;
}
._1829hio3 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
}
._1829hio4 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1829hio5 {
  display: flex;
  flex-direction: column;
  min-height: 72px;
  align-items: center;
  justify-content: center;
}
._1829hio6 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--onix-border);
  border-radius: 8px;
}
._1829hio7 {
  flex: 1 0 0;
}
._1829hio8 {
  font-size: 18px;
  font-weight: 600;
}
._1829hio9 {
  font-size: 15px;
}
._1829hioa {
  font-size: 12px;
  font-weight: 500;
  color: var(--onix-primary);
  cursor: pointer;
}
._1829hioa:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1829hiob {
  margin-top: 8px;
}
._1829hioc {
  display: flex;
  align-items: center;
  gap: 16px;
}
._1829hiod {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
  line-height: 22px;
}
._1829hioe {
  display: flex;
  gap: 4px;
  color: var(--onix-primary);
}
._1829hioe.past-due {
  color: var(--onix-destructive);
}
._1829hiof {
  font-size: 12px;
  font-weight: 500;
}
._1829hiog {
  width: 14px;
  height: 14px;
}
.frxiin0 {
  height: 100%;
  padding: 40px 15px 20px 15px;
  display: flex;
}
.frxiin1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
}
.frxiin2 {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
  min-height: calc(var(--setting-modal-height) - 124px);
  max-width: 560px;
}
.frxiin2[data-wide="true"] {
  max-width: 92%;
}
.frxiin3 {
  font-size: 14px;
  color: var(--onix-foreground);
  display: flex;
  align-items: start;
  line-height: 22px;
  gap: 12px;
}
.frxiin4 {
  color: var(--onix-muted-foreground);
  margin-right: 12px;
  display: flex;
  margin: 3px 0;
}
.frxiin5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  gap: 4px;
  font-size: 12px;
  flex-wrap: wrap;
  max-width: 560px;
}
.frxiin6 {
  color: var(--onix-primary);
  cursor: pointer;
}
.frxiin7 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.frxiin8 {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
}
.frxiin9 {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
}
._1u7ak8e0 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
}
._1u7ak8e1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
}
._1u7ak8e2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--onix-background);
  transform: translateX(100%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
._1u7ak8e3 {
  padding-top: 16px;
}
._1u7ak8e4 {
  padding: 12px 0px 8px 16px;
  flex-shrink: 0;
}
._1u7ak8e5 {
  height: 0 !important;
  flex: 1;
}
._1u7ak8e6 {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
._12swxhi0 {
  width: 0;
  flex-grow: 1;
}
._12swxhi1 {
  height: 0;
  flex-grow: 1;
}
._12swxhi2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
}
._1fosioz0 {
  padding: 8px 12px 12px 12px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  height: 150px;
  display: flex;
  flex-direction: column;
  background: var(--onix-popover);
  cursor: pointer;
  color: unset;
}
._1fosioz0:visited {
  color: unset;
}
._1fosioz0:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1fosioz1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-bottom: 4px;
}
._1fosioz2 {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--affine-v2-integrations-background-iconSolid);
  box-shadow: var(--affine-button-shadow);
  border: 0.5px solid var(--onix-border);
  font-size: 24px;
  padding: 4px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-muted-foreground);
}
._1fosioz3 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._1fosioz4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--onix-foreground);
}
._1fosioz5 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
}
._1fosioz6 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
}
._1fosioz7 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
._1fosioz7:not(:empty) {
  margin-top: 8px;
  height: 28px;
}
._1qma3cl0 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
._1qma3cl0[data-divider="true"] {
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--onix-border);
}
._1qma3cl1 {
  width: 0;
  flex: 1;
}
._1qma3cl2 {
  width: 40px;
  height: 40px;
  font-size: 30px;
  border-radius: 5px;
}
._1qma3cl3 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1qma3cl4 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
}
._1qma3cl5 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
._1qma3cl5[data-has-desc="false"] {
  padding: 5px 0;
}
._1qma3cl6 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1qma3cl7 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
  margin-top: 2px;
}
._1qma3cl8 {
  border-radius: 4px;
  border: 1px solid var(--onix-border);
}
._1qma3cl9 {
  padding: 8px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--onix-border);
}
._1qma3cl9:last-child {
  border-bottom: none;
}
._1qma3cl9:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
._1qma3cla {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--onix-foreground);
}
._1qma3clb {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
}
._1qma3clc {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--onix-primary);
  flex-shrink: 0;
}
._8jj2nh0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._8jj2nh1 {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  background: var(--onix-background);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._8jj2nh2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
._8jj2nh3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--onix-foreground);
}
._8jj2nh4 {
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._8jj2nh5 {
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  white-space: nowrap;
}
._8jj2nh6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._8jj2nh7 {
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  padding: 8px 0;
}
._8jj2nh8 {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
._1yptamc0 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
._1yptamc0:hover {
  background: var(--onix-accent);
}
._1yptamc0:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1yptamc1 {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
._1yptamc2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._1yptamc3 {
  font-size: 14px;
  line-height: 20px;
  color: var(--onix-foreground);
}
._1yptamc4 {
  font-size: 12px;
  line-height: 18px;
  color: var(--onix-muted-foreground);
}
._1mfbx5z0 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1mfbx5z1 {
  border: 1px solid var(--onix-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--onix-background);
}
._1mfbx5z2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onix-border);
}
._1mfbx5z3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1mfbx5z4 {
  font-size: 12px;
  line-height: 20px;
  color: var(--onix-muted-foreground);
}
._1mfbx5z5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  text-align: center;
}
._1mfbx5z6 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
._1mfbx5z7 {
  display: flex;
  flex-direction: column;
}
._1mfbx5z8 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--onix-border);
}
._1mfbx5z8:last-child {
  border-bottom: 0;
}
._1mfbx5z9 {
  opacity: 0.55;
  background: var(--onix-card);
}
._1mfbx5za {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1mfbx5zb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1mfbx5zc {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
  background: var(--onix-card);
}
._1mfbx5zd {
  display: flex;
  gap: 8px;
}
._1mfbx5ze {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
._1mfbx5zf {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--onix-muted-foreground);
  border-right: 1px solid var(--onix-border);
}
._1mfbx5zf:last-child {
  border-right: 0;
}
._1mfbx5zg {
  width: 500px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}
._1mfbx5zh {
  font-size: 18px;
  font-weight: 600;
  color: var(--onix-foreground);
}
._1mfbx5zi {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1mfbx5zj {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._1mfbx5zk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--onix-card);
  color: var(--onix-foreground);
}
._1mfbx5zl {
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--onix-border);
  padding: 0 10px;
  background: var(--onix-background);
  color: var(--onix-foreground);
}
._1mfbx5zm {
  padding: 12px;
  border-radius: 8px;
  background: var(--onix-card);
  color: var(--onix-foreground);
  font-size: 12px;
}
._1mfbx5zn {
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._1mfbx5zo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}
._1mfbx5zp {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--onix-card);
  font-family: 'Source Code Pro', 'IBM Plex Mono', 'Roboto Mono', 'Noto Sans Mono', 'Noto Sans CJK', apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, Arial, sans-serif;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
._1mfbx5zq {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.y2hnwv1 {
  width: 480px;
  max-width: calc(100vw - 32px);
}
.y2hnwv2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 8px;
}
.y2hnwv3 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--onix-muted-foreground);
  margin-bottom: 16px;
}
.y2hnwv4 {
  height: 28px;
  border-radius: 4px;
}
.y2hnwv5 {
  font-size: 10px;
  color: var(--onix-destructive);
  line-height: 16px;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.23s ease;
}
.y2hnwv5[data-show="true"] {
  padding-top: 4px;
  height: 20px;
}
.y2hnwv6 {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}
.y2hnwv7 {
  color: var(--onix-primary);
}
.y2hnwv7:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.bxy1b50 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bxy1b51 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.bxy1b52 {
  width: 480px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
}
.bxy1b53 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.24px;
  color: var(--onix-foreground);
  margin-bottom: 12px;
}
.bxy1b54 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--onix-foreground);
  height: 0;
  flex-grow: 1;
  margin-bottom: 20px;
}
.f8sspz0 {
  width: 480px;
  max-width: calc(100vw - 32px);
  height: 65vh;
  max-height: 508px;
  min-height: min(508px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  transition: max-height 0.18s ease, min-height 0.18s ease;
}
.f8sspz0.select {
  height: 65vh;
  max-height: 508px;
  min-height: min(508px, calc(100vh - 32px));
}
.f8sspz0.writing {
  height: 65vh;
  max-height: 194px;
  min-height: min(194px, calc(100vh - 32px));
}
.f8sspz1 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--onix-foreground);
  margin-bottom: 2px;
}
.f8sspz2 {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  margin-bottom: 16px;
}
.f8sspz3 {
  color: var(--onix-primary);
  font-weight: 500;
}
.f8sspz3:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.f8sspz4 {
  height: 0;
  flex-grow: 1;
}
.f8sspz5 {
  height: 0;
  flex-grow: 1;
  text-align: center;
  padding-top: 48px;
  color: var(--onix-muted-foreground);
  font-size: 14px;
  line-height: 22px;
}
.f8sspz6 {
  width: calc(100% + 48px);
  margin: 8px -24px;
}
.f8sspz7 {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  padding-top: 20px;
}
.f8sspz8 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--onix-muted-foreground);
  font-size: 14px;
  line-height: 22px;
}
.f8sspz9 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.f8sspza {
  height: 0;
  flex-grow: 1;
}
.f8sspzb {
  display: flex;
  padding: 6px 0;
  align-items: center;
}
.f8sspze {
  font-size: 14px;
  line-height: 22px;
}
.f8sspzc .f8sspze {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--onix-muted-foreground);
  white-space: nowrap;
}
.f8sspzf {
  color: var(--onix-muted-foreground);
  width: 20px;
  margin-right: 8px;
  font-size: 20px !important;
  line-height: 0px !important;
}
.f8sspzg {
  width: 0;
  flex-grow: 32;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--onix-primary);
}
.f8sspzh {
  color: var(--onix-primary);
}
.f8sspzh:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.f8sspzi {
  font-size: 12px;
  line-height: 20px;
  width: 64px;
  margin-left: 12px;
  margin-right: 12px;
}
.f8sspzj {
  color: var(--onix-success);
}
.f8sspzk {
  color: var(--affine-v2-text-tertiary);
}
.f8sspzl {
  color: var(--onix-foreground);
}
.f8sspzm {
  width: 0;
  flex-grow: 29;
  white-space: nowrap;
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
.f8sspzn {
  display: flex;
  align-items: center;
  gap: 8px;
}
.f8sspzo {
  line-height: 0;
}
.f8sspzp {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.24px;
  color: var(--onix-foreground);
}
.f8sspzq {
  height: 0;
  flex-grow: 1;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--onix-foreground);
  padding-top: 12px;
}
.f8sspzr {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
}
._8r5enj0 {
  width: 480px;
  max-width: calc(100vw - 32px);
}
._8r5enj1 {
  width: 100%;
  color: var(--onix-muted-foreground);
}
._8r5enj2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
._8r5enj3 {
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: stretch;
}
._8r5enj3::before {
  content: "";
  width: 100%;
  height: 0;
  border-bottom: 0.5px solid var(--onix-border);
  flex-grow: 1;
}
._8r5enj4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--onix-foreground);
  margin-bottom: 8px;
}
._8r5enj5 {
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s cubic-bezier(.07,.83,.46,1), opacity 0.4s ease;
}
._8r5enj5[data-collapsed="true"] {
  grid-template-rows: 0fr;
  opacity: 0;
}
._8r5enj6 {
  overflow: hidden;
}
._8r5enj7 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--onix-foreground);
  margin-bottom: 2px;
}
._8r5enj8 {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--onix-border);
  font-size: 14px;
}
._8r5enj9 {
  font-size: 14px;
  line-height: 22px;
  color: var(--onix-muted-foreground);
}
._8r5enja {
  left: -1px;
  top: calc(-1px + var(--radix-popper-anchor-height) * -1);
  width: calc(2px + var(--radix-popper-anchor-width));
}
._1vpajlv0 {
  font-weight: 600;
  font-size: var(--affine-font-h-6);
  margin-bottom: 20px;
}
._1vpajlv1 {
  margin-bottom: 10px;
}
._1vpajlv2 {
  display: flex;
  justify-content: flex-end;
}
._1vpajlv3 {
  color: var(--affine-v2-text-primary);
  font-weight: 600;
}
._1vpajlv4 {
  vertical-align: sub;
  display: inline-block;
}
._1vpajlv5 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
._1vpajlv6 {
  line-height: 1.5;
}
._1vpajlv7 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
._1vpajlv8 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
._1vpajlv9 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1vpajlva {
  font-size: var(--affine-font-sm);
  font-weight: 500;
}
._1vpajlvb {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1vpajlvc {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
._1vpajlvd {
  color: var(--affine-v2-status-error);
  font-size: var(--affine-font-xs);
}
._1vpajlve {
  padding: 4px 8px;
}
.mqgzs50 {
  font-weight: 600;
  font-size: var(--affine-font-h-6);
  margin-bottom: 20px;
}
.mqgzs51 {
  margin-bottom: 10px;
}
.mqgzs52 {
  display: flex;
  justify-content: flex-end;
}
.mqgzs53 {
  margin-left: 4px;
  margin-right: 10px;
  color: var(--affine-v2-text-primary);
}
.mqgzs54 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.mqgzs55 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-primary);
  border-radius: 4px;
}
.mqgzs55:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.mqgzs55.active {
  color: var(--affine-v2-text-emphasis);
  cursor: default;
  pointer-events: none;
}
.mqgzs55.label {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
.mqgzs55.disabled {
  opacity: .4;
  cursor: default;
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
.mqgzs55 a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mqgzs56 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mqgzs57 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
}
.mqgzs58 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mqgzs59 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mqgzs5a {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
.mqgzs5b {
  color: var(--affine-v2-status-error);
  font-size: var(--affine-font-xs);
}
.mqgzs5c {
  padding-left: 0;
  padding-right: 0;
  overflow-y: visible;
}
.mqgzs5d {
  display: flex;
  gap: 8px;
}
.mqgzs5e {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
}
._3kwj0e0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
._3kwj0e1 {
  display: flex;
  flex-direction: row;
  align-items: start;
  font-size: var(--affine-font-base);
}
._3kwj0e2 {
  background: var(--affine-v2-icon-activated);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 10px;
}
.hhh0cq0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hhh0cq1 {
  display: flex;
  flex-wrap: nowrap;
}
.hhh0cq2 {
  background-color: var(--affine-v2-icon-activated);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 4px;
  margin-right: 12px;
}
.hhh0cq3 {
  padding-left: 0;
}
.hhh0cq4 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hhh0cq5 {
  color: var(--affine-v2-status-error);
  font-size: 24px;
}
._1gmrgl70 {
  position: relative;
  opacity: 0.4;
  margin-top: 24px;
}
._1gmrgl70::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: not-allowed;
}
._1gmrgl71 {
  padding: 4px;
  border-radius: 12px;
  background: var(--onix-background);
  border: 1px solid var(--onix-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
._1gmrgl72 {
  gap: 24px;
  display: flex;
  flex-direction: column;
}
._1gmrgl73 {
  display: inline-flex;
  align-items: center;
}
._1gmrgl74 {
  font-size: 12px;
  color: var(--onix-primary);
  cursor: pointer;
  margin-left: 4px;
  display: inline;
}
._1gmrgl75 {
  color: var(--onix-destructive);
}
._1gmrgl76 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--onix-muted-foreground);
  gap: 4px;
  padding: 16px 8px;
  font-size: 12px;
  text-align: center;
}
._1gmrgl77 {
  padding: 0 4px 0 16px;
  height: 58px;
  display: flex;
  width: 100%;
  align-items: center;
}
._1gmrgl77:hover {
  background: var(--onix-accent);
  border-radius: 8px;
}
._1gmrgl77:not(:last-of-type) {
  margin-bottom: 6px;
}
._1gmrgl78 {
  width: 250px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 20px;
}
._1gmrgl79 {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
._1gmrgl79.pending {
  color: var(--onix-primary);
}
._1gmrgl79.error {
  color: var(--onix-destructive);
}
._1gmrgl7a {
  font-size: 14px;
  color: var(--onix-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}
._1gmrgl7b {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
._1gmrgl7c {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
._1gmrgl7d {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1gmrgl7e {
  display: flex;
}
._1gmrgl7f {
  background: var(--onix-primary);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 10px;
}
._1gmrgl7g {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 20px;
}
._1gmrgl7h {
  padding: 4px 8px;
}
.d6og7m0 {
  position: relative;
  padding: 0px;
  width: 560px;
  background: var(--onix-card);
  border-radius: 12px;
}
.d6og7m1 {
  margin: 44px 0px 12px 0px;
  width: 560px;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}
.d6og7m2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 24px 0;
  font-size: 15px;
}
.d6og7m3 {
  font-weight: 600;
}
.evu8hg0 {
  display: flex;
  align-items: flex-end;
  margin-top: 12px;
}
.evu8hg1 {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 10px;
  flex-wrap: wrap;
}
.evu8hg2 {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  margin-bottom: 5px;
}
.evu8hg3 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  padding: 2px 10px;
  border: 1px solid var(--affine-white-30);
  font-size: 12px;
  color: var(--onix-foreground);
  line-height: 20px;
  white-space: nowrap;
}
.evu8hg4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.evu8hg5 {
  flex-grow: 1;
}
.evu8hg5 .storage-progress-desc {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.evu8hg5 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--onix-accent);
  overflow: hidden;
}
.evu8hg6 {
  height: 100%;
}
.el5m7b0 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.el5m7b2 {
  font-size: 14px;
  width: 0;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.el5m7b3 {
  width: 250px;
}
.o582sl0 {
  display: flex;
  flex-direction: column;
}
.o582sl1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  gap: 8px;
  color: var(--onix-muted-foreground);
  border-radius: 6px;
  line-height: 22px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.o582sl1 {
  cursor: pointer;
}
.o582sl1:hover {
  background-color: var(--onix-accent);
}
.o582sl1[data-drag-preview="true"] {
  border: 1px solid var(--onix-border);
  background-color: transparent;
}
.o582sl1[data-dragging="true"] {
  opacity: 0.5;
}
.o582sl1[draggable="true"]:before {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 50%;
  left: 0;
  border-radius: 2px;
  background-color: var(--onix-muted-foreground);
  transform: translate(-6px, -50%);
  transition: height 0.2s 0.1s, opacity 0.2s 0.1s;
  opacity: 0;
  height: 4px;
  width: 4px;
  will-change: height, opacity;
}
.o582sl1[draggable="true"]:after {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 50%;
  left: 0;
  border-radius: 2px;
  background-color: transparent;
  transform: translate(-8px, -50%);
  height: 100%;
  width: 8px;
  will-change: height, opacity;
}
.o582sl1[draggable="true"]:hover:before {
  height: 12px;
  opacity: 1;
}
.o582sl2 {
  font-size: 16px;
}
.o582sl3 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--onix-foreground);
}
.o582sl4 {
  font-size: 12px;
}
.o582sl5 {
  color: var(--onix-muted-foreground);
}
._1beeob70 {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
._1beeob71 {
  display: flex;
  flex-direction: row;
  justify-items: flex-end;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 16px;
}
._1beeob72 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
  gap: 6px;
  outline: none;
  transition: background 0.2s ease;
}
._1beeob72[data-highlight] {
  background: var(--onix-secondary);
}
._1beeob72:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
._1beeob73 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
._1beeob74 {
  color: var(--onix-muted-foreground);
  font-size: 16px;
}
._1beeob75 {
  color: var(--onix-foreground);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1beeob75[data-unnamed=true] {
  color: var(--onix-muted-foreground);
}
._1beeob76 {
  color: var(--onix-muted-foreground);
  font-size: 14px;
  white-space: nowrap;
}
._1beeob77 {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--onix-border);
}
._1beeob78 {
  flex-grow: 1;
}
._1beeob79 {
  color: var(--onix-muted-foreground);
  font-size: 12px;
}
._1beeob7a {
  color: var(--onix-muted-foreground);
  font-size: 14px;
  margin-bottom: 8px;
}
._1beeob7b {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--onix-muted-foreground);
  padding: 8px 16px;
  min-width: 260px;
}
._1beeob7c {
  font-size: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--onix-border);
  background: var(--onix-secondary);
}
._1beeob7c:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.t8oy5c0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t8oy5c1 {
  flex-grow: 1;
}
.t8oy5c1 .storage-progress-desc {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.t8oy5c1 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--onix-accent);
  overflow: hidden;
}
.t8oy5c2 {
  height: 100%;
  background-color: var(--affine-v2-toast-iconState-regular);
}
.t8oy5c3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.t8oy5c4 {
  flex-grow: 1;
}
.t8oy5c5 {
  font-size: 14px;
  font-weight: 600;
  height: 28px;
}
.t8oy5c6 {
  color: var(--onix-muted-foreground);
}
.t8oy5c7 {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--onix-background);
  border: 1px solid var(--onix-border);
}
.t8oy5c8 {
  display: grid;
  grid-template-columns: repeat(3, minmax(30%, 1fr));
  gap: 12px;
}
.t8oy5c9 {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.t8oy5c9:focus-within {
  outline: 2px solid var(--onix-ring);
  outline-offset: 2px;
}
.t8oy5ca {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
}
.t8oy5cb {
  padding-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--onix-muted-foreground);
  font-size: 14px;
}
.t8oy5cc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.t8oy5cd {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 4px;
  padding: 6px;
  background-color: var(--onix-card);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
}
.t8oy5c9[data-selected="true"] .t8oy5cd {
  border-color: var(--onix-primary);
}
.t8oy5c9:hover .t8oy5cd {
  background-color: var(--onix-accent);
}
.t8oy5ce {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  opacity: 0;
}
.t8oy5c9:hover .t8oy5ce {
  opacity: 1;
}
.t8oy5c9[data-selected="true"] .t8oy5ce {
  opacity: 1;
}
.t8oy5ce path {
  background-color: var(--onix-background);
}
.t8oy5cf {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.t8oy5ch {
  font-size: 12px;
  width: 100%;
}
.t8oy5ci {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.t8oy5cj {
  font-size: 12px;
  color: var(--onix-muted-foreground);
}
._1hhvsxf0 {
  width: 25%;
  max-width: 242px;
  background: var(--onix-secondary);
  padding: 20px 0px 0px 12px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  outline: none;
}
._1hhvsxf0[data-mode="inline"][data-open="false"] {
  display: none;
}
._1hhvsxf0[data-mode="overlay"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 85%);
  max-width: 300px;
  height: auto;
  z-index: 11;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
._1hhvsxf0[data-mode="overlay"][data-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 200ms ease, visibility 0s linear 0s;
}
._1hhvsxf1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-right: 8px;
}
._1hhvsxf2 {
  font-size: 18px;
  font-weight: 600;
  line-height: calc(1em + 8px);
  padding: 0 8px;
}
._1hhvsxf3 {
  font-size: 14px;
  line-height: calc(1em + 8px);
  color: var(--onix-muted-foreground);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
._1hhvsxf4 {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: inherit;
}
._1hhvsxf4:hover {
  background: var(--onix-accent);
}
._1hhvsxf4:focus-visible {
  outline: 2px solid var(--onix-ring);
  outline-offset: -2px;
}
._1hhvsxf5 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--onix-muted-foreground);
  transition: transform 120ms ease;
  transform: rotate(-90deg);
}
._1hhvsxf5.expanded {
  transform: rotate(0deg);
}
._1hhvsxf6 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1hhvsxf7 {
  display: flex;
  align-items: center;
  text-align: left;
  padding: 4px 8px;
  height: 30px;
  flex-shrink: 0;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1hhvsxf7:hover {
  background: var(--onix-accent);
}
._1hhvsxf7.active {
  background: var(--onix-accent);
}
._1hhvsxf8 {
  display: flex;
  align-items: center;
  margin: 0px 16px;
  padding: 0px 8px 0px 32px;
  height: 30px;
  flex-shrink: 0;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--onix-muted-foreground);
}
._1hhvsxf8.active, ._1hhvsxf8:hover {
  color: var(--onix-foreground);
}
._1hhvsxf9 {
  width: 16px;
  height: 16px;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  color: var(--onix-muted-foreground);
  display: inline-flex;
}
._1hhvsxfa {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
._1hhvsxfb {
  font-size: 12px;
  color: var(--onix-foreground);
  background: var(--affine-v2-chip-label-blue);
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 4px;
  transform: translateX(2px);
}
._1hhvsxfc {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._1hhvsxfc::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--onix-primary);
}
._1hhvsxfd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
}
._1hhvsxfe {
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  -moz-column-gap: 10px;
       column-gap: 10px;
  justify-content: space-between;
  align-items: center;
}
._1hhvsxfe:hover {
  background: var(--onix-accent);
}
._1hhvsxfe.active {
  background: var(--onix-accent);
}
._1hhvsxfe .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
._1hhvsxfe .avatar.not-sign {
  color: var(--onix-muted-foreground);
  background: var(--affine-white);
  padding-bottom: 2px;
  border: 1px solid var(--onix-muted-foreground);
}
._1hhvsxfe .content {
  flex-grow: 1;
  min-width: 0;
}
._1hhvsxfe .name-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 4px;
  height: 22px;
}
._1hhvsxfe .name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px;
}
._1hhvsxfe .email {
  font-size: 12px;
  color: var(--onix-muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  ._1hhvsxf0[data-mode="overlay"] {
    transition: none;
  }
}
@keyframes _1n38raf1 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes _1n38raf2 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
._1n38raf3 {
  position: fixed;
  right: 28px;
  top: 80px;
  z-index: var(--affine-z-index-modal);
}
._1n38raf4 {
  width: 400px;
  height: 48px;
  background-color: var(--affine-background-overlay-panel-color);
  border-radius: 8px;
  box-shadow: var(--affine-shadow-3);
  min-height: 48px;
  outline: none;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  border: 0.5px solid var(--affine-border-color);
  padding: 8px 12px 8px 8px;
  z-index: calc(var(--affine-z-index-modal) + 1);
  will-change: transform, opacity;
}
._1n38raf4[data-state=entered], ._1n38raf4[data-state=entering] {
  animation: _1n38raf1 var(--_1n38raf0) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
._1n38raf4[data-state=exited], ._1n38raf4[data-state=exiting] {
  animation: _1n38raf2 var(--_1n38raf0) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
._1n38raf5 {
  display: flex;
  align-items: center;
  flex: 1;
}
._1n38raf6 {
  font-size: 20px;
  color: var(--affine-icon-color);
  vertical-align: middle;
}
._1n38raf7 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  height: 32px;
  position: relative;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--affine-white-10);
  border: 1px solid var(--affine-border-color);
}
._1n38raf7.active {
  border-color: var(--affine-primary-color);
}
._1n38raf8 {
  display: flex;
  align-items: center;
  flex: 1;
  height: 32px;
  position: relative;
}
._1n38raf9 {
  position: absolute;
  padding: 0;
  inset: 0;
  height: 100%;
  width: 100%;
  color: transparent;
  font-size: 15px;
}
._1n38rafa {
  pointer-events: none;
}
._1n38rafa::-moz-placeholder {
  color: var(--affine-text-primary-color);
}
._1n38rafa::placeholder {
  color: var(--affine-text-primary-color);
}
._1n38rafb {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1n38rafc {
  border: 1px solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
._1n38rafd {
  width: 32px;
  height: 32px;
  border-radius: 0;
}
._1n38rafd:first-child {
  border-right: 1px solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
}