body {
  color: var(--affine-text-primary-color);
  font-family: var(--affine-font-family);
  font-size: var(--affine-font-base);
}
@keyframes _1n8w2ng1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
._1n8w2ng2 {
  transform: rotate(-90deg);
}
._1n8w2ng3 {
  --_1n8w2ng0: 1.5s;
  animation: _1n8w2ng1 var(--_1n8w2ng0) infinite linear;
}
@keyframes _1djoxjj0 {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
._1djoxjj1 {
  background-color: var(--affine-v2-tooltips-background);
  color: var(--affine-v2-tooltips-foreground);
  padding: 5px 12px;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  border-radius: 4px;
  max-width: 280px;
  word-break: break-word;
  transform-origin: var(--radix-tooltip-content-transform-origin);
  animation: _1djoxjj0 0.2s cubic-bezier(0.2, 1, 0.3, 1);
}
._1djoxjj2 {
  display: flex;
  gap: 10px;
}
._1djoxjj3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
._1djoxjj4 {
  display: flex;
  align-items: center;
  gap: 2px;
}
._1djoxjj5 {
  background: var(--affine-v2-tooltips-secondaryBackground);
  font-size: var(--affine-font-xs);
  font-weight: 400;
  line-height: 20px;
  height: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 4px;
}
._1djoxjj5[data-length="1"] {
  width: 16px;
}
.trarl2e {
  --trarl23: 4px;
  --trarl21: unset;
  --trarl20: unset;
  --trarl2d: 1px;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: 0;
  border-radius: 8px;
  transition: all .3s;
  -webkit-app-region: no-drag;
  background-color: var(--trarl29);
  color: var(--trarl2a);
  box-shadow: var(--trarl28);
  border-width: var(--trarl2d);
  border-style: solid;
  border-color: var(--trarl2c);
  width: var(--trarl21);
  height: var(--trarl20);
  gap: var(--trarl23);
  padding: var(--trarl24);
  font-size: var(--trarl25);
  font-weight: var(--trarl26);
  line-height: var(--trarl27);
}
.trarl2e:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transition: inherit;
  border-radius: inherit;
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
  border-color: transparent;
  pointer-events: none;
  border-width: inherit;
  border-style: inherit;
}
.trarl2e[data-no-hover]:before, .trarl2e[data-disabled]:before {
  display: none;
}
.trarl2e:hover:before {
  opacity: 1;
}
.trarl2e[data-block] {
  display: flex;
}
.trarl2e[data-size="default"] {
  --trarl20: 28px;
  --trarl24: 4px 12px;
  --trarl22: 16px;
  --trarl25: var(--affine-font-xs);
  --trarl26: 500;
  --trarl27: 20px;
}
.trarl2e[data-size="large"] {
  --trarl20: 32px;
  --trarl24: 4px 12px;
  --trarl22: 20px;
  --trarl25: 15px;
  --trarl26: 500;
  --trarl27: 24px;
}
.trarl2e[data-size="extraLarge"] {
  --trarl20: 40px;
  --trarl24: 8px 18px;
  --trarl22: 24px;
  --trarl25: 15;
  --trarl26: 600;
  --trarl27: 24px;
}
.trarl2e[data-variant="primary"] {
  --trarl29: var(--affine-v2-button-primary);
  --trarl2a: var(--affine-v2-button-pureWhiteText);
  --trarl2b: var(--affine-v2-button-pureWhiteText);
  --trarl2c: var(--affine-v2-layer-insideBorder-blackBorder);
}
.trarl2e[data-variant="secondary"] {
  --trarl29: var(--affine-v2-button-secondary);
  --trarl2a: var(--affine-v2-text-primary);
  --trarl2b: var(--affine-v2-icon-primary);
  --trarl2c: var(--affine-v2-layer-insideBorder-blackBorder);
}
.trarl2e[data-variant="plain"] {
  --trarl29: transparent;
  --trarl2a: var(--affine-v2-text-primary);
  --trarl2b: var(--affine-v2-icon-primary);
  --trarl2c: transparent;
  --trarl2d: 0px;
}
.trarl2e[data-variant="error"] {
  --trarl29: var(--affine-v2-button-error);
  --trarl2a: var(--affine-v2-button-pureWhiteText);
  --trarl2b: var(--affine-v2-button-pureWhiteText);
  --trarl2c: var(--affine-v2-layer-insideBorder-blackBorder);
}
.trarl2e[data-variant="success"] {
  --trarl29: var(--affine-v2-button-success);
  --trarl2a: var(--affine-v2-button-pureWhiteText);
  --trarl2b: var(--affine-v2-button-pureWhiteText);
  --trarl2c: var(--affine-v2-layer-insideBorder-blackBorder);
}
.trarl2e[data-disabled] {
  opacity: 0.5;
}
.trarl2e:not([data-disabled]) {
  cursor: pointer;
}
.trarl2e:focus-visible::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--affine-v2-layer-insideBorder-primaryBorder);
}
.trarl2e[data-mobile=true]:focus-visible::after {
  content: none;
  display: none;
}
.trarl2f {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.trarl2g {
  flex-shrink: 0;
  width: var(--trarl22);
  height: var(--trarl22);
  font-size: var(--trarl22);
  color: var(--trarl2b);
  display: flex;
  align-items: center;
}
.trarl2g > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.trarl2h {
  --trarl24: 2px;
  --shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
[data-theme="dark"] .trarl2h {
  --shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.66), 0px 1px 5px 0px rgba(0, 0, 0, 0.72);
}
.trarl2h[data-icon-variant="plain"] {
  --trarl29: transparent;
  --trarl2b: var(--affine-v2-icon-primary);
  --trarl2c: transparent;
  --trarl2d: 0px;
}
.trarl2h[data-icon-variant="danger"] {
  --trarl29: transparent;
  --trarl2b: var(--affine-v2-icon-primary);
  --trarl2c: transparent;
  --trarl2d: 0px;
}
.trarl2h[data-icon-variant="danger"]:hover {
  --trarl29: var(--affine-background-error-color);
  --trarl2b: var(--affine-error-color);
}
.trarl2h[data-icon-variant="danger"]:hover:before {
  opacity: 0;
}
.trarl2h[data-icon-variant="solid"] {
  --trarl29: var(--affine-v2-button-iconButtonSolid);
  --trarl2b: var(--affine-v2-icon-primary);
  --trarl2c: transparent;
  --trarl28: var(--shadow);
}
.trarl2h[data-icon-size="24"] {
  --trarl24: 4px;
}
._1yyrpan0 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  padding-right: 0;
  color: var(--affine-text-primary-color);
  font-weight: 600;
  background: var(--affine-background-primary-color);
  border: 1px solid var(--affine-border-color);
  border-radius: 8px;
  font-size: var(--affine-font-sm);
  height: 32px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  cursor: pointer;
}
._1yyrpan0:hover {
  background: var(--affine-hover-color-filled);
}
._1yyrpan0[data-size=default] {
  height: 32px;
}
._1yyrpan0[data-size=small] {
  height: 28px;
}
._1yyrpan1 {
  width: 0.5px;
  height: 16px;
  background: var(--affine-divider-color);
  margin: 0 4px;
  margin-right: 0;
}
._1yyrpan2 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  padding-right: 10px;
}
._1yyrpan3 {
  border-radius: 4px;
}
._1yyrpan2:hover ._1yyrpan3 {
  background: var(--affine-hover-color);
}
.u46kov0 {
  display: inline-flex;
  height: 1em;
  width: 1em;
  align-items: center;
  justify-content: center;
}
.u46kov0 :is(path[fill="rgb(119,117,125)"],path[fill="rgb(122,122,122)"]) {
  fill: currentColor;
}
.u46kov0 :is(path[stroke="rgb(119,117,125)"],path[stroke="rgb(122,122,122)"]) {
  stroke: currentColor;
}
.u46kov0 :is(rect[fill="rgb(255,255,255)"],rect[fill="#ffffff"]) {
  fill: transparent;
}
.u46kov0 :is(path[fill="rgb(255,255,255)"],path[fill="#ffffff"]) {
  fill: transparent;
}
.u46kov0 :is(path[fill="rgb(245,245,245)"]) {
  fill: var(--affine-v2-layer-background-secondary);
}
._1xfv7sl3 {
  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;
}
._1xfv7sl3.mobile {
  padding: 0;
  box-shadow: none;
}
._1xfv7sl4 {
  --_1xfv7sl0: var(--affine-v2-icon-primary);
  --_1xfv7sl1: var(--affine-v2-text-primary);
  --_1xfv7sl2: transparent;
  color: var(--_1xfv7sl1);
  background-color: var(--_1xfv7sl2);
  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;
}
._1xfv7sl4.block {
  max-width: 100%;
}
._1xfv7sl4[data-disabled], ._1xfv7sl4.disabled {
  --_1xfv7sl0: var(--affine-v2-icon-disable);
  --_1xfv7sl1: var(--affine-v2-text-secondary);
  pointer-events: none;
  cursor: default;
}
._1xfv7sl4:hover {
  --_1xfv7sl2: var(--affine-hover-color);
  outline: none !important;
}
._1xfv7sl4:focus-visible {
  outline: 1px solid var(--affine-v2-layer-insideBorder-primaryBorder);
}
._1xfv7sl4.danger:hover {
  --_1xfv7sl0: var(--affine-error-color);
  --_1xfv7sl1: var(--affine-error-color);
  --_1xfv7sl2: var(--affine-background-error-color);
}
._1xfv7sl4.warning:hover {
  --_1xfv7sl0: var(--affine-warning-color);
  --_1xfv7sl1: var(--affine-warning-color);
  --_1xfv7sl2: var(--affine-background-warning-color);
}
._1xfv7sl4.checked, ._1xfv7sl4.selected {
  --_1xfv7sl0: var(--affine-primary-color);
}
._1xfv7sl5 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
._1xfv7sl6 {
  display: flex;
  flex-shrink: 0;
  font-size: var(--affine-font-h-5);
  color: var(--_1xfv7sl0);
  width: 20px;
  height: 20px;
}
._1xfv7sl7 {
  width: 100%;
  height: 8px;
  position: relative;
}
._1xfv7sl7: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 _15p0qz00 {
  from {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: none;
  }
}
@keyframes _15p0qz01 {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
  from {
    opacity: 1;
    transform: translateY(0);
  }
}
._15p0qz02 {
  animation: _15p0qz00 150ms cubic-bezier(0.42, 0, 0.58, 1);
}
._15p0qz02[data-state="closed"] {
  pointer-events: none;
  animation: _15p0qz01 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
@keyframes oy6cbk4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes oy6cbk5 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes oy6cbk6 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes oy6cbk7 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes oy6cbk8 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes oy6cbk9 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes oy6cbka {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
.oy6cbke {
  position: fixed;
  inset: 0;
  background-color: var(--affine-background-modal-color);
  z-index: var(--affine-z-index-modal);
  animation: oy6cbk4 150ms forwards;
}
.oy6cbke.anim-none {
  animation: none;
}
.oy6cbke.mobile {
  background-color: var(--affine-v2-layer-background-mobile-modal);
}
.oy6cbkf {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--affine-z-index-modal);
}
.oy6cbkf[data-mobile] {
  align-items: flex-end;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}
.oy6cbkf[data-full-screen="true"] {
  padding: 0 !important;
}
.oy6cbkf.anim-none {
  animation: none;
}
.oy6cbkf.anim-fadeScaleTop {
  animation: oy6cbk5 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
[data-oy6cbk3] .oy6cbkf.anim-fadeScaleTop.vt-active {
  view-transition-name: oy6cbkb;
}
.oy6cbkf.anim-slideBottom {
  animation: oy6cbk7 0.23s ease;
  animation-fill-mode: forwards;
}
[data-oy6cbk3] .oy6cbkf.anim-slideBottom.vt-active {
  view-transition-name: oy6cbkc;
}
.oy6cbkf.anim-slideRight {
  animation: oy6cbk9 0.23s ease;
  animation-fill-mode: forwards;
}
[data-oy6cbk3] .oy6cbkf.anim-slideRight.vt-active {
  view-transition-name: oy6cbkd;
}
::view-transition-old(oy6cbkb) {
  animation: oy6cbk6 150ms cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
::view-transition-old(oy6cbkc) {
  animation: oy6cbk8 0.23s ease;
  animation-fill-mode: forwards;
}
::view-transition-old(oy6cbkd) {
  animation: oy6cbka 0.23s ease;
  animation-fill-mode: forwards;
}
.oy6cbkg {
  --oy6cbk0: ;
  --oy6cbk1: ;
  --oy6cbk2: ;
  width: var(--oy6cbk0);
  height: var(--oy6cbk1);
  min-height: var(--oy6cbk2);
  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"] .oy6cbkg {
  --oy6cbk0: 100dvw;
  --oy6cbk1: 100dvh;
  --oy6cbk2: 100dvh;
  max-width: 100dvw;
  max-height: 100dvh;
  border-radius: 0;
}
.oy6cbkh {
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: var(--affine-z-index-modal);
}
.oy6cbki {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 12px;
}
.oy6cbkj {
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
[data-modal="false"].oy6cbkf {
  pointer-events: none;
}
[data-modal="false"] .oy6cbkg {
  pointer-events: auto;
}
._1cw8z1w0.oy6cbkg {
  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;
}
._1cw8z1w1 {
  display: flex;
  align-items: start;
  transition: all 0.23s;
}
._1cw8z1w2 {
  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);
}
._1cw8z1w3 {
  padding: 10px 20px;
  border-radius: 0;
}
._1cw8z1w3:hover {
  --_1xfv7sl2: transparent;
}
._1cw8z1w3:active {
  --_1xfv7sl2: var(--affine-hover-color);
}
._1cw8z1w3.danger {
  --_1xfv7sl1: var(--affine-v2-button-error);
  --_1xfv7sl0: var(--affine-v2-button-error);
}
._1cw8z1w3.danger:hover {
  --_1xfv7sl2: transparent;
}
._1cw8z1w3.danger:active {
  --_1xfv7sl2: var(--affine-background-error-color);
}
._1cw8z1w3.warning:hover {
  --_1xfv7sl2: transparent;
}
._1cw8z1w3.warning:active {
  --_1xfv7sl2: var(--affine-background-warning-color);
}
._1cw8z1w3[data-divider=true] {
  margin-bottom: 16px;
  position: relative;
}
._1cw8z1w3[data-divider=true]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._1cw8z1w3[data-divider=true]:last-child {
  margin-bottom: 0;
}
._1cw8z1w3[data-divider=true]:last-child::after {
  display: none;
}
._1cw8z1w4 {
  height: 42px;
  align-self: start;
  font-weight: 600;
  font-size: 17px;
  padding-left: 0;
  margin-left: 20px;
  max-width: calc(100% - 20px);
}
._1cw8z1w5 {
  max-height: 80dvh;
}
._18g04850 {
  display: flex;
  flex-direction: column;
}
._18g04853 {
  height: 100%;
  overflow-y: auto;
  padding: 12px 4px 20px 4px;
}
._18g04854 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 40px;
  margin-top: auto;
  gap: 20px;
}
._18g04854.modalFooterWithChildren {
  padding-top: 20px;
}
._18g04854.reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
._18g04856 {
  display: flex;
  flex-direction: column;
  padding: 12px 0 !important;
  border-radius: 22px;
}
._18g04857 {
  padding: 11px 22px;
}
._18g04858 {
  padding: 10px 16px;
  margin-bottom: 0px !important;
}
._18g04859 {
  padding: 11px 22px;
}
._18g0485a {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._18g0485a.row {
  flex-direction: row;
  justify-content: space-between;
}
._18g0485a.reverse {
  flex-direction: column-reverse;
}
._18g0485a.rowReverse {
  flex-direction: row-reverse;
}
._18g0485b {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
}
._18g0485b.row {
  width: auto;
  min-width: 0;
  max-width: 140px;
  flex: 1;
  height: 32px;
}
._2cfw302[data-top] {
  padding-top: calc(var(--_2cfw300) + 12px);
}
._2cfw302[data-bottom] {
  padding-bottom: calc(var(--_2cfw301, 0px) + 0px);
}
._2cfw302[data-standalone][data-top] {
  padding-top: calc(env(safe-area-inset-top, 12px) + var(--_2cfw300));
}
._2cfw302[data-standalone][data-bottom] {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--_2cfw301, 0px));
}
._19pbhma0 {
  padding: 20px 24px 8px 24px;
  font-size: var(--affine-font-h-6);
  font-family: var(--affine-font-family);
  font-weight: 600;
  line-height: 26px;
}
._19pbhma1 {
  padding: 0px 24px 8px;
  font-size: var(--affine-font-base);
  line-height: 24px;
  font-weight: 400;
}
._19pbhma2 {
  padding: 20px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
._19pbhma3 {
  font-weight: 500;
}
._19pbhma4 {
  color: var(--affine-pure-white);
  text-decoration: none;
  cursor: pointer;
}
._19pbhma4:visited {
  color: var(--affine-pure-white);
}
._1e4pc750 {
  width: 100%;
  height: 28px;
  line-height: 22px;
  gap: 10px;
  color: var(--affine-v2-text-primary);
  border: 1px solid;
  background-color: var(--affine-v2-input-background);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--affine-font-base);
  box-sizing: border-box;
  overflow: hidden;
}
._1e4pc750.no-border {
  border: unset;
}
._1e4pc750.large {
  height: 32px;
}
._1e4pc750.extra-large {
  height: 40px;
  font-weight: 600;
}
._1e4pc750.disabled {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1e4pc750.error {
  border-color: var(--affine-v2-input-border-error);
}
._1e4pc750.success {
  border-color: var(--affine-v2-input-border-active);
}
._1e4pc750.warning {
  border-color: var(--affine-v2-input-border-error);
}
._1e4pc750.default {
  border-color: var(--affine-v2-layer-insideBorder-blackBorder);
}
._1e4pc750.default:is(:focus-within, :focus, :focus-visible) {
  border-color: var(--affine-v2-button-primary);
  outline: none;
  box-shadow: 0px 0px 0px 2px rgba(30, 150, 235, 0.30);;
}
._1e4pc751 {
  height: 30px;
  border-radius: 4px;
}
._1e4pc752 {
  height: 100%;
  width: 0;
  flex: 1;
  box-sizing: border-box;
  padding: 0 12px;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border: none;
  background: transparent;
}
._1e4pc752::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1e4pc752::placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1e4pc752:disabled {
  color: var(--affine-v2-text-disable);
}
._1e4pc752:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--affine-v2-layer-white) inset;
}
._1tw4f800 {
  display: flex;
  flex-direction: column;
}
._1tw4f803 {
  height: 100%;
  overflow-y: auto;
  padding: 12px 4px 20px 4px;
}
._1tw4f804 {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
  padding: 8px 0;
}
._1tw4f807 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 40px;
  margin-top: auto;
  gap: 20px;
}
._1tw4f807.modalFooterWithChildren {
  padding-top: 20px;
}
._1tw4f807.reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
._1tw4f809 {
  display: flex;
  flex-direction: column;
  padding: 12px 0 !important;
  border-radius: 22px;
}
._1tw4f80a {
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1tw4f80b {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
  padding: 8px 16px;
}
._1tw4f80c {
  padding: 10px 16px;
  margin-bottom: 0px !important;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1tw4f80d {
  padding: 0 16px;
}
._1tw4f80e {
  height: 44px;
  font-size: 17px;
  line-height: 22px;
}
._1tw4f80f {
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1tw4f80g {
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1tw4f80g.reverse {
  flex-direction: column-reverse;
}
._1tw4f80h {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.43px;
  line-height: 22px;
}
._1gwtbhl0 {
  --scrollbar-width: 8px;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
._1gwtbhl1 {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  transition: opacity .3s .2s;
  opacity: 0;
  background: var(--affine-border-color);
}
._1gwtbhl1[data-has-scroll-top="true"] {
  opacity: 1;
}
._1gwtbhl2 {
  height: 100%;
  width: 100%;
}
._1gwtbhl2 >:first-child {
  display: contents !important;
}
._1gwtbhl3 {
  height: 100%;
}
._1gwtbhl4 {
  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;
}
._1gwtbhl4:hover {
  background: var(--affine-background-secondary-color);
  width: calc(var(--scrollbar-width) + 3px);
  border-left: 1px solid var(--affine-border-color);
}
._1gwtbhl4[data-state="hidden"] {
  opacity: 0;
}
._1gwtbhl5 {
  display: none;
}
._1gwtbhl6 {
  margin-top: 60px;
  height: calc(100% - 120px);
  border-radius: 4px;
}
._1gwtbhl7 {
  position: relative;
  background: var(--affine-divider-color);
  width: 50%;
  overflow: hidden;
  border-radius: 4px;
}
._1gwtbhl7:hover {
  background: var(--affine-icon-color);
}
._1gwtbhl7::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}
.ro2hsd0 {
  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;
}
.ro2hsd1 {
  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;
}
.ro2hsd2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}
.ro2hsd3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ro2hsd4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ro2hsd5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
}
.ro2hsd6 {
  flex: 1;
}
.ro2hsd7 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
}
.ro2hsd8 {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ro2hsd9 {
  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);
}
.ro2hsda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ro2hsdb {
  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;
}
.ro2hsdb:hover {
  background-color: var(--affine-v2-layer-background-secondary);
}
.ro2hsdb:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ro2hsdc {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ro2hsdd {
  width: 100%;
  height: 12px;
  background-color: var(--affine-v2-layer-background-tertiary);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.ro2hsde {
  height: 100%;
  background-color: var(--affine-v2-icon-fileIconColors-red);
  transition: width 0.1s linear;
}
.ro2hsdf {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  min-width: 48px;
}
.ro2hsdf:last-of-type {
  text-align: right;
}
.ro2hsdg {
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
  cursor: pointer;
}
.ro2hsdh {
  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);
}
.ro2hsdi {
  font-size: var(--affine-font-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
  margin-bottom: 2px;
}
.ro2hsdj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.ro2hsdk {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.ro2hsdl {
  position: absolute;
  right: 8px;
  top: 8px;
  display: none;
  background: var(--affine-v2-layer-background-secondary);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.ro2hsdh:hover .ro2hsdl {
  display: block;
}
@keyframes _1d629n0 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _1d629n1 {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
._1d629n2 {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 32px;
  flex-shrink: 0;
  position: relative;
}
._1d629n2::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  inset: 0;
  opacity: 0.3;
  background-color: var(--affine-placeholder-color);
}
._1d629n3 {
  width: 32px;
  border-radius: 50%;
}
._1d629n4 {
  border-radius: 4px;
}
._1d629n5 {
  border-radius: 8px;
}
._1d629n6 {
  border-radius: 4px;
  height: 1.2em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
._1d629n7 {
  animation: _1d629n0 2s ease-in-out 0.5s infinite;
}
._1d629n8 {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
._1d629n8::after {
  content: "";
  animation: _1d629n1 2s linear 0.5s infinite;
  background: linear-gradient(
     90deg,
     transparent,
     rgba(255, 255, 255, 0.4),
     transparent
   );
  position: absolute;
  transform: translateX(-100%);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.c0b3dc0 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
  max-width: 2000px;
}
@keyframes zl6vip2 {
  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 zl6vip3 {
  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);
  }
}
.zl6vip4 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.zl6vip5 {
  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(--zl6vip1));
  transform-origin: center center;
  animation: zl6vip3 3s ease-in-out forwards infinite;
  animation-play-state: paused;
}
.zl6vip6 {
  animation-play-state: running;
}
.zl6vip7 {
  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(--zl6vip1));
  transform-origin: center center;
  will-change: left, top, transform;
  animation: zl6vip2 3s ease-in-out forwards infinite;
  animation-play-state: paused;
}
.zl6vip8 {
  animation-play-state: running;
}
.zl6vip9 {
  width: 104%;
  height: 94%;
  position: absolute;
  right: -30%;
  top: -30%;
  opacity: 0.8;
  filter: blur(var(--zl6vip1));
  transform: matrix(-0.28, -0.96, 0.93, -0.37, 0, 0);
  transform-origin: center center;
}
.zl6vipa {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.zl6vipb {
  --zl6vip0: unset;
  width: var(--zl6vip0);
  height: var(--zl6vip0);
  font-size: calc(var(--zl6vip0) / 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;
}
.zl6vipc {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.zl6vipd {
  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;
}
.zl6vipe {
  background-color: var(--affine-v2-portrait-localPortraitBackground);
}
.zl6vipf {
  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;
}
.zl6vipf:hover {
  opacity: 1;
}
.zl6vipg {
  position: absolute;
  right: -8px;
  top: -2px;
  visibility: hidden;
  z-index: 1;
}
.zl6vipa:hover .zl6vipg {
  visibility: visible;
}
._1w6bpy50 {
  display: inline-flex;
  align-items: center;
  position: relative;
}
._1w6bpy50:hover svg {
  opacity: 0.8;
}
._1w6bpy50:active svg {
  opacity: 0.9;
}
._1w6bpy51 {
  opacity: 0.5;
  pointer-events: none;
}
._1w6bpy52 {
  opacity: 0;
  position: absolute;
  width: 1em;
  height: 1em;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: inherit;
}
.vewoo64 {
  flex: 1;
}
.vewoo65 {
  width: 0;
}
.vewoo66 {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.vewoo66::before, .vewoo66::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.vewoo67::after {
  transition: background-color 0.2s ease;
}
.vewoo67:hover::after {
  background-color: var(--affine-hover-color);
}
.vewoo68::before {
  opacity: 0;
  box-shadow: 0 0 0 2px var(--affine-brand-color);
}
.vewoo68::after {
  border: 1px solid transparent;
}
.vewoo68:focus-visible::before {
  opacity: 0.5;
}
.vewoo68:focus-visible::after {
  border-color: var(--affine-brand-color);
}
.vewoo69[disabled], .vewoo69[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--affine-text-disable-color);
}
.vewoo6b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--vewoo63);
  height: var(--vewoo63);
  flex-basis: var(--vewoo63);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.vewoo6c {
  min-width: calc(28px * 7 + var(--vewoo60) * 6);
}
.vewoo6d {
  display: flex;
  flex-direction: column;
  gap: var(--vewoo61);
}
.vewoo6e {
  display: flex;
  align-items: center;
}
.vewoo6f {
  height: auto;
}
.vewoo6g {
  width: 0;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
}
[data-is-left="true"] .vewoo6g {
  justify-content: flex-start;
  margin-left: -24px;
}
[data-is-right="true"] .vewoo6g {
  justify-content: flex-end;
  margin-right: -30px;
}
[data-mode="month"] [data-is-left="true"] .vewoo6g {
  margin-left: -36px;
}
[data-mode="month"] [data-is-right="true"] .vewoo6g {
  margin-right: -44px;
}
[data-mode="year"] [data-is-left="true"] .vewoo6g {
  margin-left: -48px;
}
[data-mode="year"] [data-is-right="true"] .vewoo6g {
  margin-right: -52px;
}
.vewoo6h {
  display: inline-flex;
  line-height: 22px;
  font-size: var(--vewoo62);
  font-weight: 600;
  padding: 0 6px;
  border-radius: 4px;
  white-space: nowrap;
}
[data-mobile="true"] .vewoo6h {
  padding: 0px 4px;
}
.vewoo6i {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vewoo6j {
  width: 8px;
}
.vewoo6k {
  font-size: var(--vewoo62);
  font-weight: 400;
  line-height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--affine-icon-color);
  text-transform: uppercase;
}
.vewoo6l {
  display: flex;
  flex-direction: column;
  gap: var(--vewoo61);
}
.vewoo6m {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vewoo60);
}
.vewoo6n {
  font-size: var(--vewoo62);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  height: 28px;
}
.vewoo6p {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  font-size: var(--vewoo62);
  color: var(--affine-text-primary-color);
  font-weight: 400;
}
.vewoo6p[data-is-today="true"] {
  font-weight: 600;
  color: var(--affine-brand-color);
}
.vewoo6p[data-not-current-month="true"] {
  color: var(--affine-black-10);
}
.vewoo6p[data-selected="true"] {
  background-color: var(--affine-brand-color);
  font-weight: 500;
  color: var(--affine-pure-white);
}
.vewoo6q {
  gap: 18px;
  padding-top: 18px;
}
.vewoo6s {
  height: 34px;
}
.vewoo6t {
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 24px;
}
.vewoo6t[data-selected="true"] {
  background: transparent;
  color: var(--affine-text-emphasis-color);
  font-weight: 500;
}
.vewoo6w {
  max-width: 100px;
}
._1tuvjks0 {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  max-height: 39px;
}
._1tuvjks1 {
  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;
}
._1tuvjks2 {
  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;
}
._1tuvjks2:hover {
  background-color: var(--affine-hover-color);
}
._1tuvjks2[data-today="true"]:not([data-active="true"]) {
  --cell-color: var(--affine-brand-color);
}
._1tuvjks2[data-active="true"] {
  --cell-color: var(--affine-pure-white);
  background: var(--affine-brand-color);
}
._1tuvjks2::before, ._1tuvjks2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
}
._1tuvjks2::before {
  box-shadow: 0 0 0 2px var(--affine-brand-color);
}
._1tuvjks2::after {
  border: 1px solid var(--affine-brand-color);
}
._1tuvjks2:focus-visible::before {
  opacity: 0.5;
}
._1tuvjks2:focus-visible::after {
  opacity: 1;
}
._1tuvjks3 {
  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));
}
._1tuvjks4 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: var(--cell-color, var(--affine-text-primary-color));
}
.snd8aa1 {
  --snd8aa0: 8px;
  border-bottom: 1px solid var(--affine-border-color);
  height: 0;
  margin: var(--snd8aa0) 0;
  width: 100%;
}
.snd8aa2 {
  border-left: 1px solid var(--affine-border-color);
  width: 0;
  height: 100%;
  margin: 0 var(--snd8aa0);
}
.snd8aa3 {
  border-width: 0.5px;
}
._5nglxe3 {
  --_5nglxe0: 8px;
  position: absolute;
  top: 0;
  right: 0;
  left: var(--_5nglxe1);
  bottom: 0;
  pointer-events: none;
}
._5nglxe3::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: var(--_5nglxe0);
  height: var(--_5nglxe0);
  left: 0;
  background: transparent;
  border-color: var(--_5nglxe2);
  border-width: 2px;
  border-radius: 50%;
  border-style: solid;
}
._5nglxe3::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: var(--_5nglxe2);
  left: calc(var(--_5nglxe0) / 2);
  height: 2px;
  right: 0;
}
._5nglxe3[data-no-terminal="true"]::before {
  display: none;
}
._5nglxe4::before {
  top: 0;
  transform: translate(calc(-0.5 * var(--_5nglxe0)), calc(-0.5 * var(--_5nglxe0)));
}
._5nglxe4::after {
  top: -1px;
}
._5nglxe5::before {
  bottom: 0;
  transform: translate(calc(-0.5 * var(--_5nglxe0)), calc(0.5 * var(--_5nglxe0)));
}
._5nglxe5::after {
  bottom: -1px;
}
._5nglxe6 {
  position: absolute;
  top: 0;
  right: 0;
  left: var(--_5nglxe1);
  bottom: 0;
  pointer-events: none;
  border: 2px solid var(--_5nglxe2);
  border-radius: 3px;
}
._5nglxe7 {
  height: 2px;
  left: calc(var(--_5nglxe0)/2);
  right: 0;
}
._5nglxe7::before {
  left: calc(-1 * var(--_5nglxe0));
}
._5nglxe8 {
  width: 2px;
  top: calc(var(--_5nglxe0)/2);
  bottom: 0;
}
._5nglxe8::before {
  top: calc(-1 * var(--_5nglxe0));
}
._5nglxea {
  top: var(--_5nglxe9);
}
._5nglxea::before {
  top: calc(-1 * var(--_5nglxe0) + 1px);
}
._5nglxeb {
  right: var(--_5nglxe9);
}
._5nglxeb::before {
  right: calc(-1 * var(--_5nglxe0) + 1px);
}
._5nglxec {
  bottom: var(--_5nglxe9);
}
._5nglxec::before {
  bottom: calc(-1 * var(--_5nglxe0) + 1px);
}
._5nglxed {
  left: var(--_5nglxe9);
}
._5nglxed::before {
  left: calc(-1 * var(--_5nglxe0) + 1px);
}
._5nglxee {
  --_5nglxe0: 6px;
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: var(--affine-primary-color);
}
._5nglxee::before {
  content: "";
  width: 0;
  height: 0;
  box-sizing: border-box;
  position: absolute;
  border: var(--_5nglxe0) solid var(--affine-primary-color);
  border-radius: 50%;
}
._5nglxee[data-no-terminal="true"]::before {
  display: none;
}
.b5emq10 {
  cursor: grab;
  color: var(--affine-v2-icon-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.b5emq11 {
  border-radius: 8px;
}
.b5emq10[data-dragging="true"] .b5emq11, .b5emq10:hover .b5emq11 {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._8ued5i0 {
  position: relative;
  border-radius: 4px;
  padding: 4px;
  display: inline-block;
  min-width: 50px;
  min-height: 28px;
}
._8ued5i1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-wrap: break-word;
  border: 1px solid transparent;
}
._8ued5i0[data-editing="true"] ._8ued5i1 {
  opacity: 0;
  visibility: hidden;
}
._8ued5i2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
._8ued5i0[data-editing="true"] ._8ued5i2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
._8ued5i3 {
  opacity: 0.8;
}
._14z0c3q3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: unset;
  flex-direction: column;
  color: var(--affine-text-secondary-color);
}
._14z0c3q4 {
  --_14z0c3q0: 248px;
  --_14z0c3q1: 216px;
  --_14z0c3q2: inherit;
  width: var(--_14z0c3q0);
  height: var(--_14z0c3q1);
  font-size: var(--_14z0c3q2);
}
._17lhgku0 {
  color: var(--affine-error-color);
  font-size: 0.6rem;
  margin: 4px 8px 2px 2px;
}
._1edpcnw4 {
  flex: 1;
  position: relative;
  border-radius: calc(var(--_1edpcnw1) - var(--_1edpcnw0));
  height: var(--_1edpcnw3);
  padding: 4px 8px;
  font-size: var(--affine-font-xs);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--affine-v2-switch-fontColor-tertiary);
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 600;
}
._1edpcnw4[data-state="checked"] {
  color: var(--affine-v2-switch-fontColor-primary);
}
._1edpcnw4[data-state="unchecked"]:hover:not([disabled]) {
  background: var(--affine-v2-switch-buttonBackground-hover);
}
[data-icon-mode=true] ._1edpcnw4 {
  color: var(--affine-v2-switch-iconColor-default);
}
[data-icon-mode=true] ._1edpcnw4[data-state="checked"] {
  color: var(--affine-v2-switch-iconColor-active);
}
._1edpcnw5 {
  z-index: 1;
  display: block;
}
._1edpcnw5 > svg {
  display: block;
}
._1edpcnw6 {
  display: inline-flex;
  align-items: center;
  background: var(--affine-v2-switch-switchBackground-background);
  border-radius: var(--_1edpcnw1);
  padding: var(--_1edpcnw0);
  gap: var(--_1edpcnw2);
  -webkit-app-region: no-drag;
}
._1edpcnw7 {
  position: absolute;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--affine-v2-switch-buttonBackground-active);
  box-shadow: var(--affine-button-shadow);
  opacity: 0;
  transform-origin: left;
}
[data-state="checked"] > ._1edpcnw7 {
  opacity: 1;
}
.l5ftn00 {
  width: 390px;
  max-width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
}
.l5ftn01 {
  padding: 12px 12px 0px 12px;
}
.l5ftn02 {
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  display: flex;
  justify-content: space-between;
}
.l5ftn03 {
  background-color: transparent;
}
.l5ftn04 {
  margin-bottom: 6px;
  font-size: 14px;
}
.l5ftn05 {
  height: 0;
  flex-grow: 1;
}
.pzqty60 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pzqty61 {
  padding: 16px 12px 8px 12px;
  display: flex;
  gap: 8px;
}
.pzqty62 {
  width: 0;
  flex-grow: 1;
  height: 32px !important;
  border-radius: 4px !important;
  gap: 0px !important;
}
.pzqty63 {
  height: 0;
  flex-grow: 1;
}
.pzqty64 {
  padding-top: 8px;
}
.pzqty65 {
  padding: 0px 12px;
}
.pzqty66 {
  padding: 8px 0px;
}
.pzqty67:not(:last-child) {
  margin-bottom: 8px;
}
.pzqty68 {
  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);
}
.pzqty69 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
}
.pzqty69::after {
  content: "";
  flex: auto;
  min-width: 24px;
}
.m1uwlm0 {
  display: flex;
  gap: 4px;
}
.m1uwlm1 {
  padding: 2px;
}
.m1uwlm2 {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: currentColor;
}
._57ekc11 {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
._57ekc13 {
  height: 120px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--affine-v2-text-secondary);
}
._57ekc14 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-top: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._57ekc16 {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._57ekc17 {
  color: var(--affine-v2-icon-secondary);
}
._57ekc18 {
  color: var(--affine-v2-icon-primary);
}
._17qmj730 {
  position: relative;
}
._17qmj730.scrollable {
  overflow-y: auto;
}
._17qmj731 {
  z-index: 1;
}
._17qmj732 {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
._17qmj733 {
  z-index: 1;
}
._17qmj734 {
  position: absolute;
}
.t84nwe0 {
  padding: 4px;
  border-radius: 8px;
}
.t84nwe1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.t84nwe2 {
  padding: 0;
  line-height: 1;
  color: var(--affine-v2-icon-primary);
}
.t84nwe3 {
  display: contents;
}
.t84nwe2 span:has(svg) {
  line-height: 0;
}
.t84nwe4 {
  flex-shrink: 0;
  font-size: 24px;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.t84nwe4[data-icon-type="emoji"] {
  font-size: 20px;
}
.t84nwe5 {
  height: 32px;
  border-radius: 4px;
  width: 0;
  flex-grow: 1;
}
.t84nwe6 {
  padding: 0;
}
em-emoji-picker {
  --shadow: none;
  --font-family: var(--affine-font-family);
}
em-emoji-picker #root {
  background: transparent;
}
._1a8driu7 {
  border-radius: 8px;
  box-shadow: var(--affine-shadow-1);
  border-width: 1px;
  border-style: solid;
  background-color: var(--_1a8driu0);
  border-color: var(--_1a8driu2);
  color: var(--_1a8driu1);
}
._1a8driu8 {
  padding: 16px;
}
._1a8driu9 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
._1a8driua {
  height: 24px;
  display: flex;
  align-items: center;
}
._1a8driub {
  width: 24px;
  display: flex;
  place-items: center;
  margin-right: 10px;
}
._1a8driub svg {
  width: 100%;
  height: 100%;
  color: var(--_1a8driu4);
}
._1a8driuc {
  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;
}
._1a8driud {
  color: var(--_1a8driu3);
  position: relative;
  background: transparent;
  border: none;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
._1a8driue[data-float="true"] {
  position: absolute;
  top: 16px;
  right: 16px;
}
._1a8driuf {
  color: var(--_1a8driu5) !important;
}
._1a8driug {
  margin-top: 5px;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
[data-with-icon] ._1a8driug[data-align="title"] {
  padding-left: 34px;
}
@keyframes gpdfbx0 {
  from {
    max-width: 44px;
  }
  to {
    max-width: 100vw;
  }
}
.gpdfbx1 {
  --mobile-offset-left: 0px !important;
  --mobile-offset-right: 0px !important;
}
.gpdfbx2 {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 44px;
  border-radius: 22px;
  margin: 0px auto;
  padding: 10px;
  background-color: var(--_1a8driu0);
  color: var(--_1a8driu1);
  border: 1px solid var(--_1a8driu2);
  box-shadow: var(--affine-shadow-1);
  display: flex;
  gap: 8px;
  align-items: center;
  overflow: hidden;
  transition: transform 0.1s;
}
.gpdfbx2:active {
  transform: scale(0.97);
}
.gpdfbx2[data-animated="true"] {
  visibility: hidden;
}
.gpdfbx2[data-animated="false"] {
  max-width: 44px;
  animation: gpdfbx0 0.8s cubic-bezier(.27,.28,.13,.99);
  animation-fill-mode: forwards;
}
.gpdfbx3 {
  font-size: 24px;
  line-height: 0;
  color: var(--_1a8driu4);
}
.gpdfbx4 {
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.43px;
  white-space: nowrap;
}
.gpdfbx5 {
  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);
}
.gpdfbx7 {
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gpdfbx8 {
  padding: 0 20px;
  margin-top: 8px;
}
.gpdfbxa {
  width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpdfbxb {
  display: flex;
  flex-direction: column;
}
._1ekamoj0 {
  min-width: 180px;
  color: var(--affine-text-primary-color);
  border-radius: 8px;
  padding: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 400;
  background-color: var(--affine-background-overlay-panel-color);
  box-shadow: var(--affine-menu-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.fqakjs1 {
  --fqakjs0: 10px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}
.fqakjs2 {
  height: var(--fqakjs0);
  flex: 1;
  background: var(--affine-v2-layer-background-hoverOverlay);
  border-radius: 5px;
  position: relative;
}
.fqakjs3 {
  height: var(--fqakjs0);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.fqakjs4 {
  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;
}
.fqakjs1:hover .fqakjs4, .fqakjs4:is(:focus-visible, :focus-within) {
  opacity: 1;
}
.fqakjs5 {
  width: 40px;
  font-size: var(--affine-font-sm);
  text-align: right;
}
.fqakjs6 {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  background: var(--affine-v2-toast-iconState-regular);
  transition: background 0.2s ease-in-out;
}
.fqakjs1:hover .fqakjs6, .fqakjs6:has(.fqakjs4:is(:focus-visible, :focus-within, :active)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[data-state="complete"].fqakjs6 {
  background: var(--affine-v2-status-success);
}
._1u36tim0 {
  display: flex;
  gap: 4px;
  min-height: 30px;
  position: relative;
  flex-wrap: wrap;
}
._1u36tim0[draggable="true"] {
  cursor: grab;
}
._1u36tim0[draggable="true"][data-dragging="true"] {
  visibility: hidden;
}
._1u36tim0[draggable="true"]:before {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 15px;
  left: 0;
  border-radius: 2px;
  background-color: var(--affine-v2-text-placeholder);
  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;
}
._1u36tim0[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;
}
._1u36tim0[draggable="true"]:hover:before {
  height: 12px;
  opacity: 1;
}
._1u36tim1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1u36tim2 {
  overflow: hidden;
  height: 0px;
  min-height: 0px;
  padding: 0px;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}
._1u36tim3 {
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  justify-content: start;
  position: relative;
  border-radius: 4px;
  font-size: var(--affine-font-sm);
  padding: 4px;
  flex-shrink: 0;
  line-height: 22px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--affine-v2-text-tertiary);
  width: 160px;
  height: 30px;
}
._1u36tim3[data-has-menu="true"] {
  cursor: pointer;
}
._1u36tim3[data-has-menu="true"]:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
[data-drag-preview] ._1u36tim3:hover {
  background-color: transparent;
}
._1u36tim4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
._1u36tim5 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._1u36tim6 {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--affine-font-sm);
}
._1u36tim7 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  border-radius: 4px;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  padding: 4px;
  flex: 1;
}
._1u36tim7:focus-visible {
  outline: none;
}
._1u36tim7::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1u36tim7::placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1u36tim7[data-readonly="false"][data-hoverable="true"] {
  cursor: pointer;
}
._1u36tim7[data-readonly="true"][data-hoverable="true"] {
  cursor: default;
}
._1u36tim7[data-hoverable="true"]:is(:hover, :focus-within) {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1u36tim8 {
  align-self: flex-start;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-tertiary);
  padding: 0 8px 0px 4px;
  height: 30px;
  font-weight: 400;
  gap: 6px;
}
._1u36tim8 svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._1u36tim8:hover svg {
  color: var(--affine-v2-icon-primary);
}
._1u36tim9 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1u36tima {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px;
  min-height: 30px;
}
._1u36timb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}
._1u36timc {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--affine-v2-icon-primary);
}
._1u36timd {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
._1u36timd[data-collapsed="true"] {
  color: var(--affine-v2-text-secondary);
}
._1u36time {
  transition: all 0.2s ease-in-out;
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
._1u36time[data-collapsed="true"] {
  transform: rotate(90deg);
  color: var(--affine-v2-icon-secondary);
}
._1u36timf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1u36timf[hidden] {
  display: none;
}
@media print {
  ._1u36tim8 {
    display: none;
  }
}
._9xsa411[data-disabled] {
  opacity: 0.5;
}
._9xsa412 {
  width: 100%;
  height: 1px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
}
._9xsa412[data-disabled] {
  cursor: not-allowed;
}
._9xsa413 {
  width: calc(100% - var(--_9xsa410));
  transform: translateX(calc(var(--_9xsa410) * 0.5));
  height: 1px;
  background-color: var(--affine-v2-layer-insideBorder-border);
  position: relative;
  display: flex;
  justify-content: space-between;
}
._9xsa414 {
  height: 100%;
  background-color: var(--affine-v2-icon-primary);
  border-radius: 1px;
  position: absolute;
  top: 0;
  left: 0;
}
._9xsa415 {
  width: var(--_9xsa410);
  height: var(--_9xsa410);
  background-color: var(--affine-v2-icon-primary);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
._9xsa415[data-disabled] {
  cursor: not-allowed;
}
._9xsa416 {
  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%);
}
._9xsa416[data-active="true"] {
  background-color: var(--affine-v2-icon-primary);
}
._9xsa416[data-disabled="true"] {
  cursor: not-allowed;
}
._4mkn674 {
  --_4mkn670: 26px;
  --_4mkn671: 3px;
  --_4mkn672: calc((var(--_4mkn670) - var(--_4mkn671)) * 2);
  --_4mkn673: calc(var(--_4mkn670) - var(--_4mkn671) * 2);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
._4mkn675 {
  opacity: 0;
  position: absolute;
}
._4mkn676 {
  position: relative;
  height: var(--_4mkn670);
  width: var(--_4mkn672);
  background: var(--affine-toggle-disable-background-color);
  border-radius: 37px;
  transition: 200ms all;
}
._4mkn676:before {
  content: "";
  transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
  position: absolute;
  width: var(--_4mkn673);
  height: var(--_4mkn673);
  border-radius: 50%;
  top: 50%;
  background: var(--affine-toggle-circle-background-color);
  transform: translate(var(--_4mkn671), -50%);
}
._4mkn677 {
  background: var(--affine-primary-color);
}
._4mkn677:before {
  border-color: var(--affine-pure-black-10);
  transform: translate(calc(var(--_4mkn670) - var(--_4mkn671)), -50%);
}
._4mkn678 {
  cursor: not-allowed;
  opacity: 0.5;
}
._1faf47y0 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}
._1faf47y1 {
  display: flex;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}
._1faf47y1::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--affine-v2-layer-insideBorder-border);
}
._1faf47y2 {
  all: unset;
  font-weight: 500;
  padding: 6px 4px;
  cursor: pointer;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-secondary);
  border-bottom: 2px solid transparent;
}
._1faf47y2[data-state="active"] {
  color: var(--affine-v2-text-primary);
  border-color: var(--affine-v2-button-primary);
}
._1faf47y3 {
  display: flex;
  flex-direction: column;
}
._1faf47y3[data-state="inactive"] {
  display: none;
}
._1vaxxm94 {
  --_1vaxxm90: 256px;
  --_1vaxxm91: 0;
  position: relative;
  width: var(--_1vaxxm90);
  min-width: var(--_1vaxxm90);
  height: 100%;
  z-index: 4;
  transform: translateX(0);
  max-width: 50%;
}
._1vaxxm94[data-open="false"][data-handle-position="right"],._1vaxxm94[data-is-floating="true"][data-handle-position="right"] {
  margin-left: calc(var(--_1vaxxm90) * -1);
}
._1vaxxm94[data-open="false"][data-handle-position="left"],._1vaxxm94[data-is-floating="true"][data-handle-position="left"] {
  margin-right: calc(var(--_1vaxxm90) * -1);
}
._1vaxxm94[data-open="true"][data-handle-position="right"][data-is-floating="true"] {
  transform: translateX(calc(var(--_1vaxxm90) + 4px));
}
._1vaxxm94[data-open="true"][data-handle-position="left"][data-is-floating="true"] {
  transform: translateX(calc(var(--_1vaxxm90) * -1));
}
._1vaxxm94[data-enable-animation="true"] {
  transition: margin-left var(--_1vaxxm93), margin-right var(--_1vaxxm93), transform var(--_1vaxxm93), background var(--_1vaxxm93);
}
._1vaxxm94[data-transition-state="exited"] {
  visibility: hidden;
}
._1vaxxm95 {
  contain: strict;
  width: 100%;
  height: 100%;
}
._1vaxxm96 {
  position: relative;
  height: 100%;
  overflow: auto;
}
._1vaxxm97 {
  position: absolute;
  right: var(--_1vaxxm91);
  top: var(--_1vaxxm92);
  bottom: var(--_1vaxxm92);
  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;
}
._1vaxxm97[data-resizing="true"], ._1vaxxm97:hover {
  opacity: 1;
}
._1vaxxm97[data-open="false"] {
  display: none;
}
._1vaxxm97[data-open="open"] {
  display: block;
}
._1vaxxm97[data-handle-position="left"] {
  left: var(--_1vaxxm91);
  right: auto;
  transform: translateX(-50%);
}
._1vaxxm98 {
  position: absolute;
  height: 100%;
  width: 2px;
  border-radius: 2px;
  background-color: var(--affine-primary-color);
  transition: all 0.2s ease-in-out;
  transform: translateX(0.5px);
}
._1vaxxm97[data-resizing="true"] ._1vaxxm98 {
  width: 4px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  ._1vaxxm97 {
    display: none;
  }
}
.sf2wfo0 {
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.sf2wfo1 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
._1ew327i0 {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--affine-font-base);
  position: relative;
  background: linear-gradient(180deg, rgba(255,250,246,1) 0%, rgba(255,255,255,1) 100%);
}
._1ew327i1 {
  color: inherit;
  text-decoration: none;
}
._1ew327i2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
}
._1ew327i3 {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
._1ew327i4 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 18px;
  border-radius: 8px;
  transition: background 0.15s;
}
._1ew327i4:hover {
  background: rgba(0,0,0,0.04);
}
._1ew327i5 {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
._1ew327i6 {
  color: rgba(249,115,22,1);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--affine-font-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}
._1ew327i6:hover {
  opacity: 0.8;
}
._1ew327i7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}
._1ew327i8 {
  margin-top: 20px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #18181b;
}
._1ew327i9 {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  align-items: center;
}
._1ew327ia {
  font-weight: 500;
  text-decoration: none;
  color: rgba(249,115,22,1);
  font-size: var(--affine-font-sm);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
._1ew327ib {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  position: absolute;
  bottom: 48px;
}
._1ew327ic {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
}
@media screen and (min-width: 768px) {
  ._1ew327i2 {
    padding: 16px 120px;
  }
}
.o6lzo30 {
  height: 100%;
  width: 100%;
  position: relative;
}
.o6lzo31 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
._1enxj170 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 35px;
}
._1enxj171 {
  max-width: 100%;
  width: 300px;
}
._1enxj172 {
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
  margin-bottom: 4px;
}
._1enxj173 {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 0;
  max-width: 300px;
}
._1enxj174 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
._1enxj175 {
  display: flex;
  gap: 16px;
}
._1enxj177 {
  padding: 8px 18px;
  height: auto;
  font-weight: 600;
}
._1enxj178 {
  padding: 0 4px;
}
._1enxj179 {
  padding: 0 4px;
}
._1ge1eiu0 {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
._1ge1eiu1 {
  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;
}
._1ge1eiu1[data-show-stack="true"] {
  max-width: 600px;
}
._1ge1eiu2 {
  width: 100%;
  overflow: hidden;
  text-wrap: wrap;
  word-break: break-word;
}
._1ge1eiu3 {
  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;
}
._1ge1eiu3[data-show-stack="true"] {
  max-height: 200px;
}
._1ge1eiu4 {
  max-width: 100%;
  width: 300px;
  align-self: center;
}
._1ge1eiu5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--affine-v2-text-primary);
  margin-bottom: 4px;
}
._1ge1eiu6 {
  display: flex;
  margin-top: 16px;
  width: 100%;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
._1ge1eiu7 {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 120px;
}
._1ge1eiu8 {
  display: flex;
  align-items: center;
}
._1ge1eiu9 {
  transition: transform 0.3s ease-in-out;
  margin-left: 8px;
  width: 16px;
  height: 16px;
}
._1ge1eiu9[data-show-stack="true"] {
  transform: rotate(180deg);
}
._5djy920 {
  padding-bottom: 8px;
}
._5djy920[data-has-border=true] {
  border-right: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._5djy920[data-is-floating="true"], ._5djy920[data-is-electron="false"] {
  background-color: var(--affine-v2-layer-background-primary);
}
._5djy921[data-is-floating="true"] {
  background-color: var(--affine-v2-layer-background-primary);
  height: calc(100% - 60px);
  margin-top: 52px;
  margin-left: 4px;
  box-shadow: var(--affine-popover-shadow);
  border-radius: 6px;
}
._5djy921[data-is-floating="true"][data-is-electron="true"] {
  height: 100%;
  margin-top: -4px;
}
._5djy921[data-is-floating="true"][data-client-border="true"] {
  background-color: var(--affine-v2-layer-background-overlayPanel);
}
._5djy921[data-is-floating="true"][data-client-border="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--affine-noise-opacity, 0);
  background-repeat: repeat;
  background-size: 50px;
  background-image: var(--noise-background);
}
._5djy922 {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
._5djy923 {
  display: flex;
  align-items: center;
  -moz-column-gap: 32px;
       column-gap: 32px;
}
._5djy924 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
._5djy925 {
  flex: 0 0 auto;
  height: 52px;
  padding: 0px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._5djy926 {
  flex: 1 1 auto;
  height: calc(100% - 52px);
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
._5djy927 {
  transition: opacity .15s;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  background: var(--affine-v2-layer-background-modal);
}
._5djy927[data-open="true"][data-is-floating="true"] {
  opacity: 1;
  pointer-events: auto;
  right: 0;
  z-index: 3;
}
._5djy928 {
  align-items: flex-end;
  margin-bottom: 2px;
}
@media print {
  ._5djy920 {
    display: none;
    z-index: -1;
  }
  ._5djy927 {
    display: none;
  }
}
._104lr7r0 {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition: max-width 0.2s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease;
}
._104lr7r0: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(--affine-v2-button-primary);
}
._104lr7r0[data-show=true] {
  opacity: 1;
  max-width: 60px;
}
._104lr7r0[data-show=false] {
  opacity: 0;
  max-width: 0;
}
._104lr7r0[data-notification=true]:after {
  transform: scale(1);
}
._104lr7r1 {
  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");
}
._104lr7r1[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");
}
._5hzb680 {
  display: flex;
  height: 100%;
  overflow: clip;
  width: 100%;
  position: relative;
  flex-direction: column;
  min-width: 0;
  background: var(--affine-background-primary-color);
}
._5hzb681 {
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  flex-shrink: 0;
  background: var(--affine-background-primary-color);
  padding: 0 16px;
  contain: strict;
}
._5hzb681[data-show-switch=true] {
  padding-left: 8px;
}
._5hzb682 {
  display: flex;
  flex: 1;
  overflow: hidden;
  contain: strict;
}
._5hzb683 {
  margin: 0 16px 0 0;
}
._5hzb684 {
  transition: all 0.2s ease-in-out;
}
._5hzb684[data-show=true] {
  opacity: 1;
  width: 32px;
  max-width: 32px;
  margin-left: 16px;
}
._5hzb684[data-show=false] {
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  pointer-events: none;
}
._5hzb685 {
  display: flex;
  height: 100%;
  width: 0;
  flex-grow: 1;
  min-width: 12px;
}
@media print {
  ._5hzb681 {
    display: none;
  }
}
._4et8uw0 {
  display: flex;
  background: var(--affine-background-primary-color);
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
[data-client-border=true] ._4et8uw0 {
  border-radius: 6px;
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
[data-client-border=true][data-is-floating="true"] ._4et8uw0 {
  box-shadow: var(--affine-shadow-3);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
._4et8uw1 {
  display: flex;
  flex-direction: column;
  height: 0;
  flex: 1;
  width: 100%;
  align-items: center;
}
._4et8uw2 {
  border-top: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._4et8uw3 {
  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(--affine-text-secondary-color);
  align-items: center;
}
._1prb1up0 {
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  flex-shrink: 0;
  padding: 0 16px;
  z-index: 1;
  gap: 12px;
  background: var(--affine-background-primary-color);
}
._1prb1up1 {
  flex-grow: 1;
  min-width: 12px;
}
._1prb1up2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 52px;
  position: relative;
}
@media print {
  ._1prb1up0 {
    display: none;
  }
}
.xhb2fx0 {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
._1kej4s60 {
  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;
}
._1kej4s61 {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
._1kej4s62 {
  padding: 0px 20px;
  cursor: grab;
  -webkit-app-region: no-drag;
  color: var(--affine-placeholder-color);
  transition: all 0.2s;
  gap: 2px;
}
._1kej4s62:hover, ._1kej4s62[data-active="true"], ._1kej4s62[data-dragging="true"] {
  color: var(--affine-brand-color);
}
._1kej4s62[data-dragging="true"] {
  gap: 3px;
}
._1kej4s63 {
  padding: 3px 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  background-color: var(--affine-v2-layer-background-primary);
  border-radius: 8px;
}
._1kej4s64 {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: currentColor;
  transition: all 0.2s;
}
._1kej4s62[data-dragging="true"] ._1kej4s64:is([data-idx="0"], [data-idx="2"]) {
  width: 7px;
}
._1kej4s62[data-dragging="true"] ._1kej4s64[data-idx="1"] {
  width: 6px;
}
._1kej4s65 {
  position: absolute;
  inset: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  transition: opacity 0.2s;
  opacity: 0;
}
._1kej4s62[data-dragging="true"] ._1kej4s65, ._1kej4s62:hover ._1kej4s65 {
  opacity: 1;
}
@keyframes _13spdsn8 {
  from {
    --_13spdsn2: 50px;
    --_13spdsn5: 3px;
    --_13spdsn6: 1;
    --_13spdsn7: 10px;
  }
  to {
    --_13spdsn2: 300px;
    --_13spdsn5: 100%;
    --_13spdsn6: 0.15;
    --_13spdsn7: 4px;
  }
}
._13spdsn9 {
  flex-shrink: 0;
  flex-grow: var(--_13spdsn3, 1);
  position: relative;
  order: var(--_13spdsn4);
  display: flex;
}
[data-is-resizing="true"]._13spdsn9 {
  transition: none;
}
[data-is-reordering="true"]._13spdsn9 {
  flex-grow: 1;
}
[data-client-border="false"] ._13spdsn9[data-is-first="true"] {
  border-top-left-radius: var(--_13spdsn1);
}
[data-client-border="false"] ._13spdsn9:not([data-is-last="true"]):not([data-is-dragging="true"]) {
  border-right: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
[data-client-border="true"] ._13spdsn9 {
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  border-top-left-radius: var(--_13spdsn1);
  border-bottom-left-radius: var(--_13spdsn1);
  border-top-right-radius: var(--_13spdsn1);
  border-bottom-right-radius: var(--_13spdsn1);
}
._13spdsna {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: opacity 0.2s;
}
._13spdsna::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"]._13spdsna::after {
  box-shadow: inset 0 0 0 1px var(--affine-v2-button-primary);
}
[data-is-dragging="true"] ._13spdsna {
  opacity: 0.5;
}
._13spdsnb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
._13spdsnc {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--_13spdsn2);
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
._13spdsnc[data-can-resize="false"]:not([data-state="drop-indicator"]) {
  pointer-events: none;
}
._13spdsnc[data-state="drop-indicator"] {
  --_13spdsn2: 50px;
}
._13spdsnc[data-edge="left"] {
  left: calc(var(--_13spdsn2) * -0.5);
  right: auto;
}
._13spdsnc[data-edge="right"] {
  left: auto;
  right: calc(var(--_13spdsn2) * -0.5);
}
._13spdsnc[data-edge="right"][data-is-last="true"] {
  right: 0;
  left: auto;
}
[data-client-border="false"] ._13spdsnc[data-is-last="true"][data-edge="right"]::before, [data-client-border="false"] ._13spdsnc[data-is-last="true"][data-edge="right"]::after {
  transform: translateX(calc(0.5 * var(--_13spdsn2) - 1px));
}
._13spdsnc[data-can-resize="true"] {
  cursor: col-resize;
}
[data-client-border="true"] ._13spdsnc[data-edge="right"] {
  right: calc(var(--_13spdsn2) * -0.5 - 0.5px - var(--_13spdsn0) / 2);
}
._13spdsn9[data-is-dragging="true"] ._13spdsnc {
  display: none;
}
._13spdsnc[data-state="drop-indicator"][data-dragging-over="true"] {
  --_13spdsn6: 1;
  --_13spdsn5: 3px;
  animation-name: _13spdsn8;
  animation-duration: 0.5s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
._13spdsnc::before, ._13spdsnc::after {
  content: "";
  width: var(--_13spdsn5);
  position: absolute;
  height: 100%;
  transition: all 0.2s, transform 0s;
  border-radius: var(--_13spdsn7);
}
._13spdsnc::before {
  background: var(--affine-v2-button-primary);
  opacity: var(--_13spdsn6);
}
._13spdsnc[data-state="resizing"]::before, ._13spdsnc[data-state="resizing"]::after {
  --_13spdsn5: 3px;
  --_13spdsn6: 1;
}
._13spdsnc[data-state="drop-indicator"][data-dragging-over="false"]::before {
  --_13spdsn6: 0.5;
}
._13spdsnc:is(:hover[data-can-resize="true"], [data-state="resizing"])::before {
  --_13spdsn5: 3px;
  --_13spdsn6: 1;
}
._13spdsnc:is(:hover[data-can-resize="true"], [data-state="resizing"])::after {
  box-shadow: 0px 12px 21px 4px var(--affine-v2-button-primary);
  opacity: 0.15;
}
._13spdsnd {
  --_13spdsn0: 0px;
  --_13spdsn1: 6px;
  --_13spdsn2: 10px;
  --_13spdsn5: 2px;
  --_13spdsn6: 0;
  --_13spdsn7: 10px;
  display: flex;
  flex-direction: row;
  position: relative;
  border-radius: var(--_13spdsn1);
  gap: var(--_13spdsn0);
  padding: 0 10px;
  margin: 0 -10px;
}
._13spdsnd[data-client-border="true"] {
  --_13spdsn0: 8px;
}
._13spdsnd:has(._13spdsnc[data-dragging-over="true"]) {
  overflow: clip;
}
._13spdsne {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._17e19z30 {
  display: flex;
  height: 100%;
  flex: 1;
}
._17e19z31 {
  flex: 1;
  overflow: hidden;
  height: 100%;
}
._17e19z32 {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  right: 0;
}
._17e19z32[data-client-border=true] {
  padding-left: 8px;
  border-radius: 6px;
}
._17e19z32[data-client-border=false] {
  border-left: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._1mekkdp0 {
  position: fixed;
  inset: 0;
  z-index: var(--affine-z-index-modal);
  background-color: var(--affine-v2-layer-background-modal);
  pointer-events: auto;
}
._1mekkdp0[data-anime-state="animating"] {
  opacity: 0;
}
._1mekkdp1 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--affine-z-index-modal);
}
._1mekkdp2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
._1mekkdp1[data-mode="max"] ._1mekkdp2 {
  width: calc(100% - 64px);
  height: calc(100% - 64px);
}
._1mekkdp1[data-mode="full"] ._1mekkdp2 {
  width: 100%;
  height: 100%;
}
._1mekkdp1[data-mode="fit"] ._1mekkdp2 {
  width: 90%;
  height: 90%;
  max-width: 1248px;
}
._1mekkdp2[data-anime-state="animating"] {
  opacity: 0;
}
._1mekkdp3 {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
._1mekkdp4 {
  background-color: var(--affine-background-overlay-panel-color);
  box-shadow: var(--affine-shadow-3);
}
._1mekkdp5 {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  min-height: 300px;
  outline: none;
  position: relative;
}
._1mekkdp5[data-no-interaction=true] {
  pointer-events: none;
}
._1mekkdp6 {
  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) {
  ._1mekkdp1:is([data-mode="max"], [data-mode="fit"]) ._1mekkdp2 {
    height: 80%;
    width: calc(100% - 32px);
    padding-right: 0;
    padding-bottom: 32px;
    align-self: flex-end;
  }
  ._1mekkdp6 {
    top: -48px;
    right: 0;
    left: 0;
    padding: 8px;
  }
}
@media screen and (width > 640px) and (width <= 1024px) {
  ._1mekkdp1[data-mode="fit"] ._1mekkdp2 {
    padding-right: 12px;
  }
  ._1mekkdp6 {
    padding-left: 0;
  }
}
.zxd9wy0 {
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: all;
  transform-origin: 0 0;
  font-weight: 400;
  line-height: var(--affine-line-height);
}
.zxd9wy1 {
  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;
}
.zxd9wy1:hover {
  opacity: 1;
}
.zxd9wy1.flip {
  transform: translateX(-50%) rotate(180deg);
}
.zxd9wy2 {
  position: absolute;
  border-color: var(--affine-black-10);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.zxd9wy0[data-editing="true"] .zxd9wy2 {
  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);
}
.zxd9wy3 {
  width: 100%;
  height: 100%;
}
.zxd9wy4 {
  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;
}
._1agjfdq0 {
  position: absolute;
  border-color: var(--affine-black-10);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.zxd9wy0[data-editing="true"] ._1agjfdq0 {
  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);
}
._1mhxv8p0 {
  position: relative;
}
._1mhxv8p0 .doc-title-container {
  padding: 26px 0px;
  margin-left: unset;
  margin-right: unset;
}
._1w29e100 {
  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);
}
._1w29e101 {
  display: flex;
  width: 100%;
  height: 20px;
  align-items: center;
  justify-content: space-between;
}
._1w29e102 {
  font-weight: 600;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
}
._1w29e103 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: var(--affine-v2-icon-primary);
}
._1w29e104 {
  display: flex;
  width: 100%;
  gap: 2px;
  flex-direction: column;
}
._1w29e105 {
  display: flex;
  height: 20px;
  align-items: center;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
._1w29e106 {
  font-weight: 400;
}
._1w29e107 {
  display: flex;
  gap: 2px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
._1w29e108 {
  display: flex;
  align-items: center;
  line-height: 20px;
}
._1w29e109 {
  scale: 0.8;
}
.jo7gp10 {
  position: relative;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  flex-grow: 1;
  overflow-y: scroll;
}
.jo7gp11 {
  position: relative;
}
.jo7gp12 {
  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;
}
.jo7gp13 {
  height: 2px;
  border-radius: 1px;
  background-color: var(--affine-brand-color);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  contain: layout size;
  width: 100%;
}
.jo7gp14 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.jo7gp15 {
  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;
}
._1sgz7pb0 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
._1sgz7pb0[data-status="dragging"] {
  pointer-events: none;
  opacity: 0.5;
}
._1sgz7pb0[data-sortable="true"] {
  padding: 2px 0px;
}
._1sgz7pb1 {
  position: relative;
  width: 100%;
  border-radius: 4px;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1sgz7pb0[data-sortable="true"] ._1sgz7pb1:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1sgz7pb0[data-status="selected"] ._1sgz7pb1 {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1sgz7pb0[data-status="dragging"] ._1sgz7pb1 {
  background: var(--affine-v2-layer-background-hoverOverlay);
  opacity: 0.9;
}
._1sgz7pb2 {
  padding: 0 8px;
  width: 100%;
  min-height: 28px;
  display: none;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}
._1sgz7pb2:hover {
  cursor: grab;
}
._1sgz7pb0[data-sortable="true"] ._1sgz7pb2 {
  display: flex;
}
._1sgz7pb0[data-visibility="edgeless"] ._1sgz7pb2:hover {
  cursor: default;
}
._1sgz7pb0[data-visibility="edgeless"] ._1sgz7pb3 {
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
._1sgz7pb4 {
  display: flex;
  align-items: center;
  justify-content: center;
}
._1sgz7pb5 {
  text-align: center;
  font-size: var(--affine-font-sm);
  color: var(--affine-brand-color);
  font-weight: 500;
  line-height: 14px;
}
._1sgz7pb6 {
  height: 1px;
  flex: 1;
  border-top: 1px dashed var(--affine-border-color);
  transform: translateY(50%);
}
._1sgz7pb7 {
  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;
}
._1sgz7pb1:hover ._1sgz7pb7 {
  display: flex;
}
._1sgz7pb8 {
  display: flex;
  border-radius: 4px;
  background-color: var(--affine-hover-color);
  align-items: center;
}
._1sgz7pb9 {
  display: flex;
  padding: 2px 0px 2px 4px;
  align-items: center;
}
._1sgz7pba {
  font-family: var(--affine-font-sans-family);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--affine-v2-text-primary);
}
._1sgz7pba:hover {
  cursor: pointer;
}
._1sgz7pbb {
  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);
}
._1sgz7pbb[data-show] {
  display: flex;
}
.lswp9g0 {
  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;
}
.lswp9g0:hover {
  cursor: pointer;
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.active > .lswp9g0 {
  color: var(--affine-v2-text-emphasis);
}
.lswp9g0:not(:has(span)) {
  display: none;
}
.lswp9g1 {
  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);
}
.lswp9g2 {
  color: var(--affine-v2-icon-disable);
}
.lswp9g3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  height: 22px;
}
.lswp9g4 {
  font-weight: 400;
  padding-left: 28px;
}
.lswp9g5 {
  font-weight: 600;
  padding-left: 0;
}
.lswp9g6 {
  font-weight: 600;
  padding-left: 0;
}
.lswp9g7 {
  font-weight: 600;
  padding-left: 4px;
}
.lswp9g8 {
  font-weight: 600;
  padding-left: 12px;
}
.lswp9g9 {
  font-weight: 600;
  padding-left: 16px;
}
.lswp9ga {
  font-weight: 600;
  padding-left: 20px;
}
.lswp9gb {
  font-weight: 600;
  padding-left: 24px;
}
.lswp9gc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lswp9gd {
  font-size: inherit;
  border-bottom: 0.5px solid var(--affine-divider-color);
  white-space: break-spaces;
  margin-right: 2px;
}
.lswp9ge {
  color: var(--affine-v2-text-disable);
}
.lswp9gf > svg {
  margin-bottom: 0.1em;
}
.lswp9gg {
  color: var(--affine-v2-text-disable);
  text-decoration: line-through;
}
._1s9b44s1 {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 16px;
}
._1s9b44s2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._1s9b44s3 {
  width: 119px;
  height: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
}
._1s9b44s4 {
  display: none;
  justify-content: center;
  align-items: center;
  background: var(--affine-v2-layer-background-overlayPanel);
  box-shadow: var(--affine-shadow-2);
  border-radius: 8px;
}
._1s9b44s4[data-show] {
  display: flex;
}
._1f43owc1 {
  padding: 8px;
  width: 220px;
  display: flex;
  flex-direction: column;
}
._1f43owc2 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding: 4px 12px;
  align-items: center;
}
._1f43owc3 {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  padding: 0 4px;
}
._1f43owc4 {
  gap: 4px;
}
._1f43owc5 {
  width: 138px;
  height: 20px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
._1f43owc6 {
  display: flex;
}
.wtf1pm0 {
  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;
}
._7hjxct0 {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1;
  overflow: hidden;
  resize: none;
}
._7hjxct0:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
._7hjxct0:not(.gridding):before {
  background-color: var(--affine-v2-layer-background-secondary);
}
._7hjxct0.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);
}
._7hjxct1 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
._7hjxct2 {
  display: flex;
  justify-content: space-between;
  height: 52px;
  padding: 10px 8px;
  background: var(--affine-v2-layer-background-primary);
  font-size: 12px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
  border-top-width: 0.5px;
  border-top-style: solid;
  border-top-color: var(--affine-v2-layer-insideBorder-border);
  text-wrap: nowrap;
  overflow: hidden;
}
._7hjxct3 {
  overflow: hidden;
}
._7hjxct2 > ._7hjxct3 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
}
._7hjxct3.zoom:not(.show) {
  display: none;
}
._7hjxct4 {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  word-wrap: break-word;
}
._12b56v10 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
._12b56v11 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  margin-top: 12px;
}
._12b56v12 {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-tertiary);
}
._12b56v13 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
._1ri2d3d0 {
  width: 100%;
}
._1ri2d3d1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100% - 40px);
  gap: 20px;
}
._1ri2d3d1.small-gap {
  gap: 12px;
}
._1ri2d3d2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1ri2d3d3 {
  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);
}
._1ri2d3d4 {
  max-width: 100%;
}
._1ri2d3d5 {
  display: flex;
  align-self: center;
  width: 179.66px;
  height: 253px;
  aspect-ratio: 539 / 759;
  overflow: hidden;
}
._1ij8p5i0 {
  width: 100%;
}
._1ij8p5i1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
._1ij8p5i2 {
  max-width: calc(100% - 40px);
  background: var(--affine-v2-layer-white);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: var(--affine-v2-layer-insideBorder-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;
}
._1ij8p5i3 {
  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(--affine-v2-layer-insideBorder-border);
  background-color: var(--affine-v2-layer-background-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
}
._1ij8p5i4 {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}
._1ij8p5i4.collapsed {
  display: none;
}
._1ij8p5i4:not(.collapsed) {
  margin-bottom: 8px;
}
._1ij8p5i5 {
  display: flex;
  overflow: hidden;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
}
._1ij8p5i5.selected {
  border-color: #29A3FA;
}
._1ij8p5i6 {
  width: 100%;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
  background: var(--affine-background-primary-color);
  -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;
}
._1ij8p5i7 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
  background: var(--affine-v2-layer-background-secondary);
  flex: 1;
}
._1ij8p5i8 {
  position: absolute;
  max-width: calc(100% - 24px);
  overflow: hidden;
  height: auto;
  pointer-events: none;
}
._1ij8p5i9 {
  position: absolute;
  bottom: 16px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._1ij8p5ia {
  width: 36px;
  height: 36px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--affine-border-color);
  background: var(--affine-white);
}
._1ij8p5ib {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  text-wrap: nowrap;
}
._1ij8p5ic {
  display: flex;
  align-items: center;
}
._1ij8p5ic.truncate {
  overflow: hidden;
}
._1ij8p5id {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1ij8p5ie {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
}
._1ij8p5if {
  margin: auto;
}
._1ij8p5ig {
  position: absolute;
  left: 18px;
  bottom: 18px;
}
._1ij8p5ih {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 18px;
  outline: none;
  border: none;
  cursor: pointer;
  color: var(--affine-v2-button-pureWhiteText);
  background: var(--affine-v2-status-error);
  box-shadow: var(--affine-overlay-shadow);
}
._1ij8p5ii {
  width: 244px;
  gap: 8px;
  color: var(--affine-v2-text-primary);
  line-height: 22px;
}
._1ij8p5ij {
  display: flex;
  justify-content: flex-end;
}
._1ij8p5ik {
  display: flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  color: var(--affine-v2-button-primary);
}
._1v1ha0l0 {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
._1v1ha0l1 {
  margin: auto 2rem;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
._1v1ha0l2 {
  max-width: 100%;
  width: 300px;
  align-self: center;
}
._1v1ha0l3 {
  width: 100%;
  text-align: center;
  max-width: 261px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px auto 0;
}
._1v1ha0l3[data-longer-loading="true"] {
  max-width: 400px;
}
._1v1ha0l4 {
  margin-right: 8px;
}
._1v1ha0l5 {
  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;
}
._1v1ha0l6 {
  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;
}
._1v1ha0l6[data-longer-loading="true"] {
  text-align: start;
}
._1v1ha0l7 {
  margin-top: 24px;
}
._1v1ha0l8 {
  padding: 8px 18px;
  height: auto;
  font-weight: 600;
  margin-top: 24px;
}
._1v1ha0l9 {
  padding: 0 4px;
}
._1v1ha0la {
  padding: 0 4px;
}
._18cznvz0 {
  position: absolute;
  top: 204px;
  right: 22px;
  max-height: calc(100% - 204px - 76px);
  display: flex;
}
@container (width <= 640px) {
  ._18cznvz0 {
    display: none;
  }
}
.ubmlgk0 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 422px;
}
.ubmlgk1 {
  margin-bottom: 20px;
}
.ubmlgk1 .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(249,115,22,1) 0%, rgba(244,63,94,1) 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(244,99,32,0.28);
  vertical-align: middle;
}
.ubmlgk1 > p:first-of-type {
  font-size: var(--affine-font-h-4);
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 28px;
  display: flex;
  align-items: center;
}
.ubmlgk1 > p:last-of-type {
  font-size: var(--affine-font-base);
  font-weight: 500;
  line-height: 24px;
  color: rgba(82, 82, 91, 1);
}
.ubmlgk2 {
  font-size: var(--affine-font-base);
  line-height: var(--affine-font-h-3);
  flex-grow: 1;
}
.ubmlgk2 > *:not(:last-child) {
  margin-bottom: 20px;
}
.ubmlgk3 {
  position: relative;
}
.ubmlgk3.with-hint {
  margin-bottom: 8px;
}
.ubmlgk4 > *:not(:last-child) {
  margin-bottom: 20px;
}
.ubmlgk3 label {
  display: block;
  color: var(--affine-text-secondary-color);
  margin-bottom: 4px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
}
.ubmlgk5 {
  color: var(--affine-error-color);
  font-size: var(--affine-font-xs);
  line-height: 20px;
}
.ubmlgk2 a {
  color: var(--affine-link-color);
}
.ubmlgk6 {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--affine-font-base);
  background: linear-gradient(180deg, rgba(255,250,246,1) 0%, rgba(255,255,255,1) 100%);
  padding: 32px 20px;
}
.ubmlgk6 .wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1180px;
  justify-content: center;
  gap: 48px;
}
.ubmlgk6 .content {
  width: 100%;
  max-width: 560px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(228,228,231,0.8);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
  padding: 40px 36px;
}
.ubmlgk6 .title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
  color: #18181b;
}
.ubmlgk6 .subtitle {
  margin-bottom: 24px;
  color: rgba(82, 82, 91, 1);
  line-height: 28px;
}
.ubmlgk6 a {
  color: rgba(249,115,22,1);
}
.ubmlgk7 {
  width: 100%;
}
.ubmlgk8 {
  width: 100%;
  max-width: 440px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(228,228,231,0.8);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
  padding: 28px 24px;
}
.ubmlgk9 {
  min-height: 100vh;
  width: 100%;
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,250,246,1) 0%, rgba(255,255,255,1) 100%);
  padding: 32px 20px;
}
.ubmlgka {
  width: 100%;
  max-width: 460px;
  color: #18181b;
}
.ubmlgkb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(253,186,116,0.5);
  background: rgba(255,255,255,0.88);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(234,88,12,1);
}
.ubmlgkc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #18181b;
  text-decoration: none;
  margin-bottom: 20px;
}
.ubmlgkd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(249,115,22,1) 0%, rgba(244,63,94,1) 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(244,99,32,0.28);
}
.ubmlgke {
  margin: 20px 0 12px;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.94;
}
.ubmlgkf {
  margin: 0;
  font-size: 18px;
  line-height: 32px;
  color: rgba(82, 82, 91, 1);
}
.ubmlgkg {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.ubmlgkh {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(228,228,231,0.8);
  padding: 14px 16px;
}
.ubmlgki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,237,213,1);
  color: rgba(234,88,12,1);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.ubmlgkj {
  width: 330px;
  position: relative;
}
.ubmlgkl {
  flex-shrink: 0;
  width: 670px;
}
@media screen and (max-width: 1024px) {
  .ubmlgk6 {
    flex-direction: column;
    padding: 24px 20px 60px;
    justify-content: flex-start;
  }
  .ubmlgk6 .wrapper {
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
  }
  .ubmlgk6 .content {
    padding: 28px 22px;
  }
  .ubmlgkk {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .ubmlgk9 {
    flex-direction: row;
  }
}
@media screen and (max-width: 1023px) {
  .ubmlgk9 {
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 20px 60px;
    gap: 24px;
  }
}
@media screen and (max-width: 720px) {
  .ubmlgke {
    font-size: 42px;
  }
}
@media screen and (max-width: 520px) {
  .ubmlgkj {
    width: 100%;
  }
}
._1nfgo8l0 {
  position: absolute;
  right: 10px;
}
._1nfgo8l1 {
  padding: 2px 15px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: var(--affine-font-xs);
}
._1nfgo8l1.weak {
  background-color: var(--affine-tag-red);
  color: var(--affine-error-color);
}
._1nfgo8l1.medium {
  background-color: var(--affine-tag-orange);
  color: var(--affine-warning-color);
}
._1nfgo8l1.strong {
  background-color: var(--affine-tag-green);
  color: var(--affine-success-color);
}
._1nfgo8l1.minimum, ._1nfgo8l1.maximum {
  background-color: var(--affine-tag-red);
  color: var(--affine-error-color);
}
._14cttc0 {
  background-color: var(--affine-background-primary-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
._14cttc0[data-is-macos-electron="true"] {
  margin: 8px;
  border-radius: 8px;
  height: calc(100vh - 16px);
}
._14cttc1 {
  padding-top: 24px;
  padding-right: 24px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  -webkit-app-region: drag;
}
._14cttc1[data-is-windows-electron="true"] {
  padding-top: 0;
  padding-right: 0;
  gap: 16px;
}
._14cttc2 {
  padding: 20px;
  position: sticky;
  bottom: 0;
  background-color: var(--affine-background-primary-color);
}
._14cttc3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 200px 160px;
}
._14cttc4 {
  max-width: 600px;
}
._14cttc5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-height: 450px;
}
._14cttc6 {
  font-family: Inter;
  font-size: var(--affine-font-h-1);
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
._14cttc7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-grow: 1;
}
._14cttc8 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}
._14cttc9 {
  align-items: center;
  font-size: 24px;
}
._14cttc9 svg {
  color: var(--affine-brand-color);
  flex-shrink: 0;
  margin-right: 8px;
}
._14cttca {
  font-size: var(--affine-font-base);
  font-weight: 500;
}
._14cttcb {
  width: 520px;
}
._14cttcc {
  font-weight: 600;
  font-size: var(--affine-font-base);
}
._14cttcd {
  align-self: flex-start;
}
._14cttce {
  position: absolute;
  display: none;
  pointer-events: none;
}
._14cttcf {
  margin-right: 24px;
}
._14cttcg {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._14cttch {
  font-size: var(--affine-font-title);
  font-weight: 700;
  line-height: 44px;
}
._14cttci {
  font-size: var(--affine-font-h-6);
  height: 300px;
  font-weight: 600;
  line-height: 26px;
}
._14cttcj {
  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);
}
._14cttck {
  color: var(--affine-text-secondary-color);
}
._14cttck:visited {
  color: var(--affine-text-secondary-color);
}
@media screen and (max-width: 1024px) {
  ._14cttc3 {
    padding: 0px 36px 80px;
  }
  ._14cttc4 {
    padding: 40px 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  ._14cttcb {
    width: 100%;
  }
}
.gyq9g20 {
  container-type: inline-size;
}
.gyq9g21 {
  --affine-editor-side-padding: 96px;
  min-height: 100%;
}
[data-full-width-layout="true"] .gyq9g21 {
  --affine-editor-width: 100%;
  --affine-editor-side-padding: 72px;
}
.gyq9g22 {
  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);
}
._10ikojt0 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._10ikojt1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
._10ikojt2 {
  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;
}
._10ikojt3 {
  color: var(--affine-white);
  position: absolute;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
  opacity: 0.2;
  padding: 0 15px;
  cursor: pointer;
}
._10ikojt4 {
  display: flex;
  height: 100%;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
}
._10ikojt5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
._10ikojt6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._10ikojt7 {
  color: var(--affine-white);
  margin-top: 24px;
}
._10ikojt8 {
  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;
}
._10ikojt9 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  min-width: 34px;
  padding: 1px 2px;
  font-size: 14px;
}
._10ikojta {
  height: 24px;
  padding: 1px 2px;
  min-width: 50px;
  font-size: 14px;
  color: var(--affine-icon-color) !important;
}
._10ikojta:hover {
  background-color: var(--affine-hover-color);
}
._10ikojtb {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 28px;
  z-index: 2;
}
._10ikojtc {
  max-width: 686px;
  color: var(--affine-white);
  background: rgba(0,0,0,0.75);
  padding: 10px;
  margin-bottom: 21px;
}
._10ikojtd {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
@media screen and (max-width: 768px) {
  ._10ikojt5 {
    align-items: center;
  }
  ._10ikojt7 {
    text-align: center;
  }
}
.dg0spb0 {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}
.dg0spb1 {
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: var(--affine-v2-centerPeek-buttonBackground);
}
@media screen and (width <= 640px) {
  .dg0spb0 {
    flex-direction: row-reverse;
    width: 100%;
  }
  [data-action-name="close"].dg0spb1 {
    margin-left: auto;
    order: 0;
  }
}
._1068mtz0 {
  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;
}
._1068mtz1 {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--affine-v2-icon-secondary);
}
._1068mtz2 {
  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;
}
._16q3bw80 {
  display: flex;
  flex-direction: column;
}
._16q3bw81 {
  padding: 10px 8px 0px 8px;
}
._16q3bw82 {
  padding: 0px 8px 10px 8px;
}
._16q3bw83 {
  width: 9px;
  padding: 0px 2px;
}
._16q3bw83:hover {
  padding: 0;
}
._16q3bw84 {
  width: 5px;
}
._16q3bw85 {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
}
._16q3bw86 {
  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;
}
._16q3bw87 {
  display: flex;
  flex-direction: column;
}
._16q3bw88 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._16q3bw89 {
  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;
}
._16q3bw8a {
  border-radius: 8px;
}
._16q3bw8b {
  height: 42px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1wvntnn0 {
  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;
}
._1wvntnn0:hover {
  cursor: pointer;
  background: var(--affine-hover-color);
}
._1wvntnn1 {
  width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
._1wvntnn2 {
  flex-shrink: 0;
  line-height: 0;
}
._1wvntnn3 {
  pointer-events: none;
  opacity: 0.8;
}
._1wvntnn3:hover {
  cursor: default;
  background: none;
}
._1wvntnn4 {
  --h: 42px;
  height: var(--h);
  overflow: hidden;
}
._1wvntnn4[data-dense="true"] {
  --h: 22px;
}
._1wvntnn5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(.45,.21,0,1) 0s;
}
._1wvntnn4[data-active="true"] ._1wvntnn5 {
  transform: translateY(calc(var(--h) * -1));
}
._1wvntnn6 {
  border: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
._1wvntnn7 {
  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;
}
._1wvntnn4[data-active="true"] ._1wvntnn7[data-type="normal"] {
  opacity: 0;
}
._1wvntnn4[data-active="false"] ._1wvntnn7[data-type="events"] {
  opacity: 0;
}
._1wvntnn8 {
  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;
}
._1wvntnn9 {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-black-50);
}
._1wvntnn9 svg {
  width: 16px;
  height: 16px;
  color: var(--affine-icon-secondary);
}
._1wvntnna {
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  color: var(--affine-text-secondary-color);
}
._1wvntnna svg {
  width: 16px;
  height: 16px;
  color: var(--affine-icon-secondary);
  display: block;
}
._1wvntnnb {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  padding: 0 8px;
  min-height: 20px;
}
._1wvntnnc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}
._1wvntnnd {
  opacity: 0;
}
._1wvntnn0:hover ._1wvntnnd {
  opacity: 1;
}
._1wvntnne {
  color: var(--affine-v2-icon-secondary);
  font-size: 14px;
}
._1wvntnnf {
  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;
}
._1wvntnn0:hover ._1wvntnnf {
  width: 20px;
  box-shadow: var(--affine-button-shadow);
  background: var(--affine-v2-button-secondary);
}
._1wvntnng {
  position: absolute;
  right: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
._1wvntnn0:hover ._1wvntnng {
  position: relative;
}
._1wvntnng:empty {
  display: none;
}
._1wvntnnh {
  font-size: 14px;
  color: var(--affine-v2-icon-activated);
}
._1wvntnni {
  display: flex;
  gap: 8px;
  align-items: center;
}
._1wvntnni:empty {
  display: none;
}
._10y74ds0 {
  padding: 0px 12px;
}
.bgiqj80 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px;
  gap: 8px;
  margin-bottom: 6px;
}
.bgiqj81 {
  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;
}
.bgiqj82 {
  display: flex;
  flex-direction: column;
}
.bgiqj83 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.bgiqj84 {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  margin-top: -1.5px;
}
.bgiqj85 {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.bgiqj85:has(~ .bgiqj84) {
  margin-bottom: -1.5px;
}
.bgiqj86 {
  color: var(--affine-v2-icon-secondary);
}
.bgiqj87 {
  width: 0;
  flex-grow: 1;
}
.bgiqj88 {
  height: 36px;
  padding: 7px 12px;
}
.bgiqj89 {
  gap: 12px;
}
.bgiqj8a {
  margin-top: 8px;
  margin-bottom: 12px;
}
.bgiqj8b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 4px;
}
.bgiqj8c {
  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;
}
.bgiqj8d {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
._1qhs4po0 {
  padding: 4px 8px;
  height: 100%;
  overflow: clip;
}
._1qhs4po1 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  overflow: hidden;
  height: 42px;
}
._1qhs4po2 {
  flex: 1;
}
._1qhs4po3 {
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-top: 42px;
}
._1qhs4po4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1qhs4po5 {
  transform: translateX(-10px);
}
._108xy000 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._108xy001 {
  width: 280px;
  padding-right: 0;
}
._108xy002 {
  padding-right: 8px;
  max-height: 360px;
}
._108xy003 {
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
}
._108xy004 {
  pointer-events: none;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  padding: 4px;
}
._108xy005 {
  color: var(--affine-v2-text-secondary);
}
._108xy006 {
  line-height: 0;
  pointer-events: auto;
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
}
._108xy007 {
  width: 0;
  flex: 1;
}
._6kj94q0 {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: var(--affine-button-shadow);
  border-width: 0;
  background: var(--affine-v2-button-iconButtonSolid);
}
._6kj94q1 {
  width: auto;
  padding: 7px;
}
._6kj94q2 {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--affine-v2-icon-primary);
}
._6kj94q3 {
  width: 280px;
}
._1f82jw0 {
  --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(--affine-white-30);
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--affine-black-10);
  font-size: var(--affine-font-sm);
  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;
}
._1f82jw0:hover {
  background: var(--affine-white-60);
}
._1f82jw0[data-disabled="true"] {
  pointer-events: none;
}
._1f82jw0:after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--affine-primary-color);
  border-radius: 50%;
  z-index: 1;
  transition: opacity 0.3s;
}
._1f82jw0:hover:after {
  opacity: 0;
}
._1f82jw1 {
  margin-right: 12px;
  color: var(--affine-icon-color);
  font-size: 24px;
}
._1f82jw2 {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--affine-shadow-1);
  color: var(--affine-text-secondary-color);
  background-color: var(--affine-background-primary-color);
  font-size: 14px;
  cursor: pointer;
  transition: 0.1s;
  border-radius: 50%;
  transform: scale(0.6);
  z-index: 1;
  opacity: 0;
}
._1f82jw2:hover {
  transform: scale(1.1);
}
._1f82jw0:hover ._1f82jw2 {
  opacity: 1;
  transform: scale(1);
}
._1f82jw3 {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
  font-size: var(--affine-font-sm);
  white-space: nowrap;
  justify-content: space-between;
}
._1f82jw4 {
  justify-content: flex-start;
}
._1f82jw0:hover ._1f82jw4, ._1f82jw0[data-updating=true] ._1f82jw4 {
  display: none;
}
._1f82jw5 {
  display: none;
  justify-content: flex-start;
}
._1f82jw0:hover ._1f82jw5, ._1f82jw0[data-updating=true] ._1f82jw5 {
  display: flex;
}
._1f82jw6 {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 8px 0;
}
._1f82jw7 {
  padding: 0 6px;
  color: var(--affine-text-secondary-color);
  background: var(--affine-background-primary-color);
  font-size: 10px;
  line-height: 18px;
  border-radius: 4px;
  margin-left: 8px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1f82jw8 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--affine-font-sm);
  white-space: nowrap;
}
._1f82jw9 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1f82jwa {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 12px;
  background: var(--affine-black-10);
}
._1f82jwb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 12px;
  background: var(--affine-primary-color);
  transition: 0.1s;
}
._1f82jwc {
  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;
}
._1f82jw0:hover ._1f82jwc, ._1f82jw0[data-updating=true] ._1f82jwc {
  display: block;
}
._1f82jwc: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;
}
._1f82jwd {
  overflow: hidden;
  position: absolute;
  inset: 0;
}
._1f82jwd: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);
}
._1f82jwd: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);
}
._1f82jw0:hover ._1f82jwd:before, ._1f82jw0:hover ._1f82jwd:after,
  ._1f82jw0[data-updating=true] ._1f82jwd:before, ._1f82jw0[data-updating=true] ._1f82jwd:after {
  transform: translateY(0) scale(1);
}
._1m8wqfs0 {
  padding: 0 24px;
}
._1m8wqfs1 {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--affine-font-sm);
  white-space: nowrap;
}
._1ifd8yo0 {
  display: flex;
  gap: 8px;
  opacity: 0;
}
._1ifd8yo1 {
  font-size: var(--affine-font-xs);
  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;
}
._1ifd8yo1[data-collapsible="true"] {
  cursor: pointer;
}
._1ifd8yo1[data-collapsible="true"]:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1ifd8yo1[data-collapsible="true"]:hover:has(._1ifd8yo0:hover) {
  background-color: transparent;
}
._1ifd8yo1:hover ._1ifd8yo2 {
  opacity: 1;
}
._1ifd8yo3 {
  color: var(--affine-v2-text-tertiary);
  font-weight: 500;
  line-height: 20px;
  flex-grow: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: start;
  cursor: pointer;
}
._1ifd8yo4 {
  --y: 1px;
  --r: 90deg;
  color: var(--affine-v2-icon-tertiary);
  transform: translateY(var(--y)) rotate(var(--r));
  transition: transform 0.2s;
}
._1ifd8yo1[data-collapsed="true"] ._1ifd8yo4 {
  --r: 0deg;
}
.qkmvqy0 {
  color: inherit;
}
.qkmvqy1 {
  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: var(--affine-font-sm);
  margin-top: 4px;
  position: relative;
}
.qkmvqy1:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.qkmvqy1[data-active="true"] {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.qkmvqy1[data-disabled="true"] {
  cursor: default;
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
.qkmvqy1[data-collapsible="true"] {
  padding-left: 4px;
  padding-right: 4px;
}
.qkmvqy1[data-collapsible="false"]:is([data-active="true"], :hover) {
  width: calc(100% + 8px + 8px);
  transform: translateX(-8px);
  padding-left: 8px;
  padding-right: 10px;
}
.qkmvqy0:first-of-type .qkmvqy1 {
  margin-top: 0px;
}
.qkmvqy2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.qkmvqy3 {
  right: 4px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.qkmvqy1:hover .qkmvqy3, .qkmvqy3[data-postfix-display="always"] {
  justify-self: flex-end;
  position: initial;
  opacity: 1;
  pointer-events: all;
}
.qkmvqy4 {
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
.qkmvqy5 {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: inherit;
}
.qkmvqy5[data-collapsed="true"] {
  transform: rotate(-90deg);
}
.qkmvqy5[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
.qkmvqy5:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.qkmvqy6 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  flex-shrink: 0;
}
.qkmvqy6[data-collapsible="true"] {
  width: 44px;
}
.qkmvqy7 {
  transition: transform 0.2s ease-in-out;
}
.qkmvqy7[data-collapsed="true"] {
  transform: rotate(-90deg);
}
.qkmvqy8 {
  flex: 1;
}
.w8omm20 {
  background: var(--affine-v2-layer-background-primary);
  border-radius: 8px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  cursor: default;
  padding: 12px 10px;
  box-shadow: var(--affine-shadow-1);
  display: flex;
  gap: 8px;
  position: fixed;
  bottom: 16px;
  left: calc(50dvw - 220px);
  width: 440px;
  z-index: var(--affine-z-index-popover);
  transition: transform 0.2s ease-in-out;
}
.w8omm20[data-hidden="true"] {
  transform: translateY(200%);
}
.w8omm21 {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
.w8omm21:not(:last-of-type) {
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.w8omm22 {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.w8omm23 {
  height: 26px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: var(--affine-font-xs);
}
.w8omm24 {
  display: inline-flex;
  align-items: center;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
  font-weight: 500;
}
.w8omm25 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-primary);
  margin-top: 4px;
}
.w8omm26 {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.w8omm27 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: var(--affine-font-xs);
  cursor: pointer;
}
.w8omm28 {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--affine-v2-icon-primary);
}
.w8omm29 {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-size: 24px;
}
.w8omm2a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
}
.w8omm2b {
  display: flex;
  justify-content: flex-start;
}
.w8omm2c {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.w8omm2d {
  flex: 1;
}
.w8omm2e {
  color: var(--affine-v2-text-link);
  text-decoration: underline;
}
._1vkd8ps0 {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: var(--affine-font-sm);
  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;
}
._1vkd8ps0:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1vkd8ps1 {
  margin-right: 12px;
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
._1vkd8ps2 {
  flex: 1;
}
._1vkd8ps3 {
  color: var(--affine-v2-text-tertiary);
  font-size: var(--affine-font-base);
}
._1vkd8ps4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vdp770 {
  padding: 4px 14px;
  display: flex;
  flex-flow: column nowrap;
}
.vdp770:empty {
  display: none;
}
.vdp771 {
  --scrollbar-width: 10px;
  flex: 1 1 auto;
  overflow-y: hidden;
}
.vdp772 {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  transition: opacity .3s .2s;
  opacity: 0;
  background: var(--affine-black-10);
}
.vdp772[data-has-scroll-top="true"] {
  opacity: 1;
}
.vdp773 {
  height: 100%;
  margin-top: 4px;
  padding-bottom: 8px;
}
.vdp773 > div {
  max-width: 100%;
  display: block !important;
}
.vdp774 {
  height: 100%;
  padding: 0px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vdp775 {
  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;
}
.vdp775[data-state="hidden"] {
  opacity: 0;
}
.vdp776 {
  position: relative;
  background: var(--affine-black-30);
  border-radius: 4px;
  overflow: hidden;
}
.vdp776::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}
._12als4t1 {
  padding-top: 6px;
}
._12als4t2[data-dragged-over="true"] {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._4j6es40 {
  z-index: 99999;
  position: fixed;
  left: 10px;
  top: -20px;
  background: var(--affine-background-primary-color);
  box-shadow: var(--affine-toolbar-shadow);
  padding: 0px 4px;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
._4j6es41 {
  width: 12px;
  height: 12px;
}
@keyframes _182lrkhc {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._182lrkh1 {
  color: inherit;
}
._182lrkh2 {
  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: var(--affine-font-sm);
  position: relative;
  margin-top: 0px;
}
._182lrkh2:hover {
  background: var(--affine-hover-color);
}
._182lrkh2[data-active="true"] {
  background: var(--affine-hover-color);
}
._182lrkh2[data-disabled="true"] {
  cursor: default;
  color: var(--affine-text-secondary-color);
  pointer-events: none;
}
._182lrkh2[data-dragging="true"] {
  opacity: 0.5;
}
._182lrkh3 {
  display: flex;
  align-items: center;
  width: 0;
  flex: 1;
  position: relative;
  gap: 12px;
}
._182lrkh4 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
._182lrkh5 {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: -10px;
  width: 10px;
  height: 10px;
}
._182lrkh6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  flex: 1;
  color: var(--affine-v2-text-primary);
  line-height: var(--affine-line-height);
}
._182lrkh7 {
  display: flex;
  align-items: center;
  right: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
._182lrkh2:hover ._182lrkh7 {
  opacity: 1;
  pointer-events: initial;
  position: initial;
}
._182lrkh8 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
  position: absolute;
}
._182lrkh2[data-collapsible="true"]:hover ._182lrkh8 {
  opacity: 0;
  pointer-events: none;
}
._182lrkh9 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: var(--affine-v2-icon-primary);
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
._182lrkh9[data-collapsed="true"] {
  transform: rotate(-90deg);
}
._182lrkh9[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
._182lrkh9:hover {
  background: var(--affine-hover-color);
}
._182lrkh2[data-collapsible="true"]:hover ._182lrkh9 {
  opacity: 1;
  pointer-events: initial;
}
._182lrkha {
  transition: transform 0.2s ease-in-out;
  font-size: 16px;
}
._182lrkha[data-collapsed="true"] {
  transform: rotate(-90deg);
}
._182lrkhb {
  display: none;
}
._182lrkhb:only-child {
  display: initial;
}
._182lrkhd {
  margin-top: 2px;
  padding-left: var(--_182lrkh0);
  position: relative;
}
._182lrkhe {
  background: var(--affine-background-primary-color);
  width: 200px;
  border-radius: 6px;
}
._182lrkhf {
  position: relative;
}
._182lrkhf[data-tree-instruction="make-child"][data-self-dragged-over="false"]:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  background: var(--affine-hover-color);
  left: var(--_182lrkh0);
  top: 0;
  width: calc(100% - var(--_182lrkh0));
  height: 100%;
}
._182lrkhf[data-tree-instruction="make-child"][data-self-dragged-over="false"][data-open="false"]:after {
  animation: _182lrkhc 1s infinite linear;
}
._1j5kgaa0 {
  display: none;
}
._1j5kgaa0:only-child {
  display: initial;
}
._168rh070 {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-disable);
  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(--_182lrkh0, 20px) + 48px);
}
._168rh070[data-dragged-over="true"] {
  background: var(--affine-v2-layer-background-hoverOverlay);
  border-radius: 4px;
}
.jxk6lr0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._1cl3c8j0 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0px;
  border-radius: 8px;
}
._1cl3c8j0[data-dragged-over="true"] {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1cl3c8j1 {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--affine-v2-button-emptyIconBackground);
}
._1cl3c8j2 {
  font-size: 20px;
  color: var(--affine-v2-icon-secondary);
}
._1cl3c8j3 {
  font-size: var(--affine-font-sm);
  text-align: center;
  color: var(--affine-v2-text-tertiary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 400;
  line-height: 22px;
}
._1cl3c8j4 {
  margin-top: 8px;
  padding: 4px 8px;
  height: 30px;
  font-size: var(--affine-font-sm);
}
._13w0vyh0 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
.j571uj0 {
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
.j571uj1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}
._30jix40[data-dragged-over="true"] {
  background: var(--affine-hover-color);
  border-radius: 4px;
}
.c5q0zv0 {
  position: relative;
}
.c5q0zv0[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);
}
.c5q0zv1 {
  font-weight: bold;
}
.f9jgke0[data-dragged-over="true"] {
  background: var(--affine-hover-color);
  border-radius: 4px;
}
.f9jgke1 {
  display: flex;
  position: relative;
}
.f9jgke2 {
  top: 20px;
  left: auto;
  right: 0;
  transform: translateX(6px);
}
.sa42nx0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% + 12px);
  height: 42px;
  padding-right: 6px;
  align-self: center;
}
.sa42nx1 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin-left: -8px;
  margin-right: -6px;
}
.sa42nx2 {
  width: 0;
  flex: 1;
}
.sa42nx3 {
  width: 0;
  flex: 1;
}
.sa42nx4 {
  gap: 8px;
}
@keyframes _46crvgb {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
._46crvg0 {
  max-height: 448px;
  width: 360px;
  display: flex;
  flex-direction: column;
}
._46crvg0[data-mobile] {
  width: 100%;
}
._46crvg1 {
  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);
}
._46crvg2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
._46crvg3 {
  flex: 1;
  padding: 8px 0px ;
}
._46crvg4 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._46crvg5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 184px;
  padding: 16px 45px;
}
._46crvg6 {
  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);
}
._46crvg7 {
  color: var(--affine-v2-text-primary);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
._46crvg8 {
  color: var(--affine-v2-text-secondary);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
._46crvg9 {
  color: var(--affine-v2-status-error);
  font-size: 14px;
  line-height: 22px;
  padding: 4px 2px;
}
._46crvga {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  position: relative;
  padding: 8px;
  gap: 8px;
  cursor: pointer;
}
._46crvga:hover:not([data-disabled="true"],:has(button:hover)) {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._46crvgc {
  opacity: 0;
  animation: _46crvgb 500ms ease forwards 1s;
}
._46crvgd {
  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;
}
._46crvga:hover ._46crvgd {
  opacity: 1;
}
._46crvge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
}
._46crvgf {
  color: var(--affine-v2-text-secondary);
  font-size: 12px;
  line-height: 20px;
}
._46crvgg {
  color: var(--affine-v2-text-placeholder);
  font-size: 12px;
  line-height: 22px;
}
._46crvgh {
  font-weight: 500;
  color: var(--affine-v2-text-primary);
  display: inline;
  vertical-align: top;
}
._46crvgh[data-inactived="true"] {
  color: var(--affine-v2-text-placeholder);
}
._46crvgi {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 4px;
}
._46crvgj {
  vertical-align: top;
  margin-right: 4px;
  color: var(--affine-v2-icon-primary);
}
._46crvgk {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: var(--affine-v2-text-secondary);
}
._1vbn8ik0 {
  background-color: var(--affine-v2-button-primary);
  color: var(--affine-v2-text-pureWhite);
  min-width: 16px;
  height: 16px;
  padding: 0px 4px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
}
.bd17sq0 {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.ply99z1 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ply99z2 {
  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;
}
.ply99z3 {
  flex-grow: 1;
  min-width: 0;
  max-width: 220px;
}
.ply99z4 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px;
}
.ply99z5 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  height: 20px;
}
.ply99z6 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 4px;
}
.ply99z7 {
  padding: 0px 6px 12px;
  cursor: pointer;
}
.ply99z8 {
  padding: 0px 6px 12px;
}
.ply99z9 {
  font-weight: 400;
  line-height: 20px;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ply99za {
  color: var(--affine-v2-text-primary);
  margin-right: 0.5em;
}
.ply99zb {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  min-width: 260px;
}
.ply99zb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
.ply99zc {
  height: 100%;
  border-radius: inherit;
  background-color: var(--ply99z0);
}
.ply99zd {
  height: 16px;
  padding: 0px 4px;
  border-radius: 2px;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  color: var(--affine-v2-button-pureWhiteText);
  background: var(--affine-v2-badge-free);
}
.ply99ze {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
}
.ply99ze:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
.ply99zf {
  display: flex;
  align-items: center;
}
.ply99zg {
  border-radius: 4px;
  border: 1px solid var(--affine-v2-layer-white);
}
.ply99zg.multi-avatar {
  margin-left: -4px;
}
.ply99zh {
  flex: 1;
  overflow: hidden;
  font-size: var(--affine-font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
  line-height: 20px;
}
.ply99zi {
  margin-left: auto;
  margin-right: 0px;
  padding: 0px 4px;
  border-radius: 2px;
  font-size: 10px;
  color: var(--affine-v2-button-pureWhiteText);
  background: var(--affine-v2-badge-believer);
  height: 16px;
  line-height: 16px;
}
.fb2efm0 {
  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;
}
.fb2efm0[data-is-believer="true"] {
  background-color: var(--affine-v2-badge-believer);
}
.fb2efm0[data-is-pro="true"] {
  background-color: var(--affine-v2-badge-pro);
}
.ei8va23 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  overflow: clip;
  pointer-events: auto;
  -webkit-app-region: drag;
}
.ei8va23[data-is-windows="false"] {
  padding-right: 8px;
}
.ei8va24 {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
  gap: 10px;
  flex-shrink: 0;
}
.ei8va23[data-mode="app"] .ei8va24 {
  transition: all 0.3s;
}
.ei8va25 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
  overflow: hidden;
  height: 100%;
}
.ei8va25[data-pinned="true"] {
  flex-shrink: 0;
}
.ei8va26 {
  background: var(--affine-v2-tab-divider-divider);
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 8px;
}
.ei8va27 {
  background: var(--affine-v2-tab-divider-divider);
  width: 1px;
  height: 100%;
  flex-shrink: 0;
}
.ei8va28 {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 0 6px;
  margin: 0 -6px;
}
.ei8va29 {
  height: 26px;
  min-width: 32px;
  max-width: var(--ei8va22);
  width: 200px;
  overflow: clip;
  background: var(--affine-v2-tab-tabBackground-default);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--affine-v2-tab-fontColor-default);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 4px;
  position: relative;
  -webkit-app-region: no-drag;
}
.ei8va28 .ei8va29 {
  margin-right: 8px;
}
.ei8va29[data-active="true"] {
  box-shadow: 0 0 0 1px var(--affine-v2-button-innerBlackBorder);
}
.ei8va28[data-dragging="true"] .ei8va29 {
  box-shadow: 0 0 0 1px var(--affine-primary-color);
}
.ei8va2a {
  min-width: 48px;
  padding: 0 8px;
  height: 100%;
  display: flex;
  gap: 4px;
  font-weight: 500;
  align-items: center;
  cursor: default;
  flex: 1;
}
.ei8va2a[data-active="true"] {
  background: var(--affine-v2-tab-tabBackground-active);
}
.ei8va2b {
  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;
}
.ei8va29:is([data-active=true], :hover) .ei8va2b:not(:empty) {
  width: 48px;
}
.ei8va2a:last-of-type[data-active=true] + .ei8va2b {
  background: linear-gradient(270deg, var(--affine-v2-tab-tabBackground-active) 50%, rgba(255, 255, 255, 0.00) 100%);
}
.ei8va2a:last-of-type[data-active=false] + .ei8va2b {
  background: linear-gradient(270deg, var(--affine-v2-tab-tabBackground-default) 65.71%, rgba(244, 244, 245, 0.00) 100%);
}
.ei8va2c {
  color: var(--affine-v2-tab-iconColor-default);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ei8va2d {
  width: 16px;
  height: 16px;
  font-size: 16px;
  flex-shrink: 0;
}
.ei8va2a[data-active=true] .ei8va2d {
  color: var(--affine-v2-tab-iconColor-active);
}
.ei8va2a[data-active=false]:hover .ei8va2d, .ei8va29:has(.ei8va2b:hover) .ei8va2a:last-of-type .ei8va2d {
  color: var(--affine-v2-tab-iconColor-hover);
}
.ei8va2e {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: none;
  color: var(--affine-v2-tab-iconColor-default);
}
.ei8va29:is([data-active=true], :hover) .ei8va2e {
  display: flex;
}
.ei8va2e:hover {
  color: var(--affine-v2-tab-iconColor-hover);
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.ei8va2f {
  min-width: 0;
  text-overflow: ellipsis;
  overflow: clip;
  white-space: nowrap;
  color: var(--affine-v2-tab-fontColor-default);
  font-size: var(--affine-font-xs);
  padding-right: 4px;
}
.ei8va2a:hover .ei8va2f, .ei8va29:has(.ei8va2b:hover) .ei8va2a:last-of-type .ei8va2f {
  color: var(--affine-v2-tab-fontColor-hover);
}
.ei8va2a[data-active="true"] .ei8va2f {
  color: var(--affine-v2-tab-fontColor-active);
}
.ei8va2a:last-of-type .ei8va2f {
  text-overflow: clip;
}
.ei8va2a:last-of-type [data-padding-right="true"].ei8va2f {
  padding-right: 32px;
}
.ei8va2g {
  flex-grow: 1;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: -8px;
  position: relative;
}
.ei8va2g[data-dragged-over=true]:after {
  content: "";
  position: absolute;
  top: 10px;
  height: 32px;
  left: -5px;
  right: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--affine-primary-color);
}
.ei8va2h {
  width: 120px;
  height: 100%;
  flex-shrink: 0;
}
.ei8va2i {
  position: absolute;
  height: 32px;
  top: 10px;
  width: 2px;
  border-radius: 2px;
  opacity: 0;
  background: var(--affine-primary-color);
}
.ei8va2i[data-edge="left"] {
  opacity: 1;
  transform: translateX(-5px);
}
.ei8va2i[data-edge="right"] {
  right: 0;
  opacity: 1;
  transform: translateX(-9px);
}
._10omz510 {
  width: 100%;
  position: relative;
  height: 100dvh;
  flex-grow: 1;
  display: flex;
  background-color: var(--affine-background-primary-color);
}
._10omz510.blur-background {
  background-color: transparent;
}
._10omz510.noisy-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--affine-noise-opacity, 0);
  background-repeat: repeat;
  background-size: 50px;
  background-image: var(--noise-background);
}
html[data-theme="light"] ._10omz510 {
  --affine-noise-opacity: 0.2;
}
html[data-theme="dark"] ._10omz510 {
  --affine-noise-opacity: 1;
}
._10omz511 {
  display: flex;
  flex-flow: row;
  height: 100%;
  width: 100%;
  position: relative;
}
._10omz512 {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}
._10omz513 {
  display: flex;
  flex-flow: row;
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
}
._10omz514 {
  display: flex;
  flex-flow: row;
  height: 40px;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
._10omz515 {
  position: relative;
  z-index: 0;
  width: 100%;
  display: flex;
  flex: 1;
  max-width: 100%;
}
._10omz515[data-client-border="true"] {
  border-radius: 6px;
  padding: 8px;
}
._10omz515[data-client-border="true"][data-side-bar-open="true"] {
  padding-left: 0;
}
._10omz515[data-client-border="true"][data-is-desktop="true"] {
  padding-top: 0;
}
._10omz515[data-client-border="false"][data-is-desktop="true"][data-side-bar-open="true"] {
  border-top-left-radius: 6px;
}
._10omz515[data-client-border="false"][data-is-desktop="true"] {
  border-top: 0.5px solid var(--affine-border-color);
  border-left: 0.5px solid var(--affine-border-color);
}
._10omz515[data-transparent=true] {
  background-color: transparent;
}
@media print {
  html[data-theme="dark"] ._10omz510 {
    --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);
  }
  ._10omz515[data-client-border="true"] {
    overflow: visible;
    padding: 0px;
    border-radius: 0px;
  }
}
@keyframes _1c0k5bs0 {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes _1c0k5bs1 {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
}
._1c0k5bs2 {
  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);
}
._1c0k5bs3 {
  will-change: transform opacity;
}
._1c0k5bs3[data-state="open"] {
  animation: _1c0k5bs0 0.2s ease-in-out;
}
._1c0k5bs3[data-state="closed"] {
  animation: _1c0k5bs1 0.2s ease-in-out;
}
._1c0k5bs4 {
  width: 1px;
  height: 24px;
  background: var(--affine-divider-color);
}
._1c0k5bs5 {
  display: flex;
  align-items: center;
  color: inherit;
  gap: 4px;
  height: 32px;
  padding: 0 6px;
}
._1c0k5bs6 {
  border-radius: 8px;
}
._1c0k5bs6:hover {
  background: var(--affine-hover-color);
}
._1c0k5bs7 {
  color: inherit;
}
._1c0k5bs7:hover {
  background: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
._1c0k5bs8 {
  display: flex;
  align-items: center;
  font-size: 20px;
  color: var(--affine-icon-color);
}
._1c0k5bs7:hover ._1c0k5bs8 {
  color: var(--affine-error-color);
}
._1yqgk1l0 {
  position: absolute;
  bottom: 26px;
  width: 100%;
  z-index: 1;
}
.g8a2bd0 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0px 4px;
  border-radius: 4px;
}
.g8a2bd0:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.g8a2bd1 {
  width: 0;
  flex: 1;
}
.g8a2bd2 {
  width: 24px;
  height: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g8a2bd3 {
  gap: 4px;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.g8a2bd3:has(.g8a2bd2) {
  padding-left: 0;
}
.g8a2bd4 {
  opacity: 0;
}
.g8a2bd0:hover .g8a2bd4 {
  opacity: 1;
}
.g8a2bd5 {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  font-size: 16px;
  flex-shrink: 0;
  color: var(--affine-v2-icon-primary);
}
.g8a2bd6 {
  --rotate: 90deg;
  transition: transform 0.23s cubic-bezier(.56,.15,.37,.97);
  transform: rotate(var(--rotate));
}
.g8a2bd0[data-collapsed="true"] .g8a2bd6 {
  --rotate: 0deg;
}
.g8a2bd7 {
  font-size: 14px;
  line-height: 22px;
  color: var(--affine-v2-text-tertiary);
  margin-left: 12px;
}
.g8a2bd8 {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--affine-v2-text-secondary);
}
.g8a2bd9 {
  padding: 0px 4px;
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  border-radius: 4px;
}
.op9iq30 {
  display: flex;
  gap: 8px;
  flex-shrink: 1.5;
  min-width: 0;
  justify-content: flex-end;
}
.op9iq31 {
  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);
}
.op9iq31:empty {
  display: none;
}
.op9iq31:not(:empty) {
  min-width: 40px;
}
.op9iq31:hover {
  flex-shrink: 0.2;
}
.op9iq32 {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 128px;
}
.op9iq32:last-child {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.op9iq33 {
  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;
}
.op9iq34 {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--affine-v2-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.op9iq35 {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.op9iq36 {
  flex-shrink: 0;
}
.op9iq36:empty {
  display: none;
}
.op9iq37 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
._1p3b5so0 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._1p3b5so1 {
  padding: 4px;
}
.re5630 {
  color: var(--affine-v2-text-placeholder);
}
.re5631 {
  display: inline-block;
}
.re5631::first-letter {
  text-transform: uppercase;
}
.re5632 {
  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;
}
._9pmjdd0 {
  color: var(--affine-placeholder-color);
}
._1vpea6h0 {
  font-size: inherit;
  display: inline-flex;
  align-items: baseline;
}
._1vpea6h1 {
  opacity: 0.5;
}
._1vpea6h2 {
  opacity: 0.5;
  text-decoration: line-through;
}
._1vpea6h3[data-show-name="true"] {
  margin-right: 0.5em;
}
._1t5fhwo0 {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: var(--affine-v2-layer-background-secondary);
}
._1t5fhwo1 {
  height: 44px;
}
._1t5fhwo2 {
  height: 44px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._1t5fhwo4 {
  --_1t5fhwo3: unset;
  max-width: var(--_1t5fhwo3);
}
._1t5fhwo4.center {
  --_1t5fhwo3: 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;
}
._1t5fhwo4:not(.center) {
  width: 0;
  flex: 1;
}
._1t5fhwo5 {
  width: 0;
  flex: 1;
}
._1t5fhwo6 {
  display: flex;
  align-items: center;
  gap: 0;
}
._1t5fhwo7 {
  display: flex;
  align-items: center;
  gap: 6px;
}
._1qdalc60 {
  padding: 0;
  overflow-y: auto;
  background-color: var(--affine-v2-layer-background-secondary);
}
._1qdalc61 {
  padding: 12px;
}
._1qdalc62 {
  color: var(--affine-v2-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
._1qdalc63 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--affine-v2-text-primary);
  padding: 0 8px;
  height: 44px;
}
._1qdalc64 {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
._1qdalc65 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1qdalc66 {
  color: var(--affine-v2-button-primary);
}
._1qdalc67 {
  padding: 4px;
}
._1qdalc68 {
  width: 100%;
  height: 44px;
  font-size: 17px;
  align-self: center;
}
._1qdalc69 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
._1qdalc6a {
  color: var(--affine-v2-text-tertiary);
  padding: 4px;
}
._1qdalc6b {
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1qdalc6c {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}
._1leti4x0[data-empty=true] {
  color: var(--affine-placeholder-color);
}
._1leti4x0[data-readonly="true"] {
  pointer-events: none;
}
._1leti4x1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
._1leti4x2 {
  gap: 20px;
}
._1leti4x3 {
  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;
}
._1leti4x4 {
  height: 32px;
  width: 28px;
}
._1leti4x5 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 12px 0px;
  min-height: 42px;
}
._1leti4x2 ._1leti4x5 {
  border-radius: 12px;
  padding-bottom: 10px;
  background-color: var(--affine-v2-layer-background-primary);
}
._1leti4x6 {
  border-bottom-color: var(--affine-v2-tab-divider-divider);
}
._1leti4x7 {
  flex-grow: 1;
  height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
._1leti4x7::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1leti4x7::placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1leti4x8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px 8px;
  max-height: 400px;
  overflow: auto;
}
._1leti4x2 ._1leti4x8 {
  padding: 0;
  max-height: none;
}
._1leti4x9 {
  overflow-x: hidden;
  position: relative;
  max-height: 200px;
  gap: 8px;
}
._1leti4x2 ._1leti4x9 {
  border-radius: 12px;
  background-color: var(--affine-v2-layer-background-primary);
  gap: 0;
  padding: 4px;
  max-height: none;
}
._1leti4xa {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  height: 34px;
  gap: 8px;
  cursor: pointer;
  border-radius: 4px;
}
._1leti4xa[data-focused=true] {
  background-color: var(--affine-hover-color);
}
._1leti4x2 ._1leti4xa {
  height: 44px;
}
._1leti4x2 ._1leti4xa[data-focused="true"] {
  height: 44px;
  background-color: transparent;
}
._1leti4xb {
  padding: 10px 8px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
  height: 34px;
}
._1leti4x2 ._1leti4xb {
  height: 44px;
}
._1leti4xc {
  height: 22px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}
._1leti4xc:last-child {
  min-width: -moz-max-content;
  min-width: max-content;
}
._1leti4xd {
  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;
}
._1leti4xd[data-focused=true] {
  border-color: var(--affine-primary-color);
}
._1leti4xe {
  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;
}
._1leti4xf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1leti4xg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
._1leti4xg:hover {
  background: var(--affine-hover-color);
}
._1leti4xh {
  margin-right: 0.5em;
}
._1leti4xi {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
._7mmwd50 {
  display: flex;
  gap: 8px;
}
._7mmwd51 {
  height: 100%;
  display: flex;
  align-items: center;
}
._7mmwd52 {
  top: calc(var(--radix-popper-anchor-height) - 18px) !important;
}
._2ofvo00 {
  font-weight: 400;
}
._19mc9jk1 {
  padding-top: 3px;
  padding-bottom: 3px;
}
._1fpr7180 {
  padding-top: 3px;
  padding-bottom: 3px;
}
._1lq2zox0 {
  height: 100px;
  align-items: center;
  padding: 48px 16px 20px 24px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  background: var(--affine-background-primary-color);
}
._1lq2zox1 {
  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;
}
._1lq2zox2 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
._1hwjcjm0 {
  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;
}
._1hwjcjm0:hover {
  background-color: var(--affine-hover-color);
}
._1hwjcjm0[data-clickable=true] {
  cursor: pointer;
}
._1hwjcjm1 {
  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;
}
._1hwjcjm2 {
  position: relative;
  margin-left: -8px;
  height: 100%;
  outline: none;
  padding-left: 8px;
}
[data-draggable=true] ._1hwjcjm2: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] ._1hwjcjm2:hover:before {
  height: 12px;
  opacity: 1;
}
[data-draggable=true][data-dragging=true] ._1hwjcjm2 {
  opacity: 0.5;
}
[data-draggable=true][data-dragging=true] ._1hwjcjm2:before {
  height: 32px;
  width: 2px;
  opacity: 1;
}
._1hwjcjm0 > :first-child {
  padding-left: 16px;
}
._1hwjcjm0 > :last-child {
  padding-right: 8px;
}
._1hwjcjm3 {
  width: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
}
._1hwjcjm4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--affine-font-h-3);
}
._1hwjcjm5 {
  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;
}
._1hwjcjm6 {
  overflow: hidden;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  white-space: nowrap;
  flex: 1;
  text-overflow: ellipsis;
  align-self: stretch;
}
._1hwjcjm7 {
  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;
}
._1hwjcjm8 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-h-3);
  color: var(--affine-icon-color);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
._1hwjcjm9 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  padding: 0 8px;
  height: 60px;
  width: 100%;
}
._1hwjcjma {
  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;
}
._1hwjcjmb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
._1hwjcjmc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 6px;
       column-gap: 6px;
  flex-shrink: 0;
}
.iozgxe0 {
  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;
}
.iozgxe0:hover {
  background-color: var(--affine-hover-color);
}
.iozgxe0[data-clickable=true] {
  cursor: pointer;
}
.iozgxe1 {
  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;
}
.iozgxe2 {
  position: relative;
  margin-left: -8px;
  height: 100%;
  outline: none;
  padding-left: 8px;
}
[data-draggable=true] .iozgxe2: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] .iozgxe2:hover:before {
  height: 12px;
  opacity: 1;
}
[data-draggable=true][data-dragging=true] .iozgxe2 {
  opacity: 0.5;
}
[data-draggable=true][data-dragging=true] .iozgxe2:before {
  height: 32px;
  width: 2px;
  opacity: 1;
}
.iozgxe0 > :first-child {
  padding-left: 16px;
}
.iozgxe0 > :last-child {
  padding-right: 8px;
}
.iozgxe3 {
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.iozgxe4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--affine-font-h-3);
}
.iozgxe5 {
  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;
}
.iozgxe6 {
  overflow: hidden;
  font-size: var(--affine-font-sm);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-self: center;
  padding-right: 4px;
}
.iozgxe7 {
  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;
}
.iozgxe8 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-h-3);
  color: var(--affine-icon-color);
  flex-shrink: 0;
}
.iozgxe9 {
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  padding: 0 8px;
  height: 60px;
  width: 100%;
}
.iozgxea {
  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;
}
.iozgxeb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}
.iozgxec {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  -moz-column-gap: 6px;
       column-gap: 6px;
  flex-shrink: 0;
}
.iozgxed {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iozgxee {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
._1xqzywk1 {
  width: 100%;
  flex: 1;
}
._1xqzywk2 {
  width: 100%;
  max-width: 100%;
  container-name: _1xqzywk0;
  container-type: inline-size;
  background: var(--affine-background-primary-color);
}
._1xqzywk3 {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
._1xqzywk5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
._1xqzywk7 {
  display: none;
}
._1xqzywk8 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  opacity: 0;
}
._1xqzywk8[data-favorite], ._1hwjcjm0:hover ._1xqzywk8, .iozgxe0:hover ._1xqzywk8 {
  opacity: 1;
}
._1xqzywk9 {
  color: inherit;
  text-decoration: none;
}
._1xqzywk9:visited {
  color: inherit;
}
._1xqzywk9:active {
  color: inherit;
}
._1xqzywka {
  position: absolute;
  right: 0;
  width: 100%;
  height: 60px;
  display: none;
  z-index: 1;
}
._1xqzywka[data-show=true] {
  background: var(--affine-background-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: auto;
}
._1xqzywkb {
  color: var(--affine-icon-color);
}
._1xqzywkb:hover {
  background: var(--affine-background-error-color);
}
._1xqzywkb:hover ._1xqzywkc {
  color: var(--affine-error-color);
}
@container _1xqzywk0 (max-width: 800px) {
  ._1xqzywk6[data-hide-item="true"] {
    display: none;
  }
}
.my5u0j0 {
  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;
}
.my5u0j0[data-sorting], .my5u0j0:hover {
  color: var(--affine-text-primary-color);
}
.my5u0j0[data-sortable] {
  cursor: pointer;
}
.my5u0j0:not(:last-child) {
  border-right: 1px solid var(--affine-hover-color-filled);
}
.my5u0j1 {
  display: inline-flex;
  font-size: 14px;
  color: var(--affine-icon-color);
}
._4bskew0 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._4bskew1 {
  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] ._4bskew1 {
  box-shadow: 0 0.5px var(--affine-border-color);
}
._4bskew2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
}
._4bskew1[data-selectable=toggle] ._4bskew2 {
  width: 32px;
}
._4bskew1[data-selection-active=true] ._4bskew2 {
  width: 24px;
}
.xv49se0 {
  padding: 4px 12px;
}
.xv49se0:hover {
  background-color: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
.xv49se0:hover svg {
  color: var(--affine-error-color);
}
.xv49se1 {
  transition: all 0.3s;
}
.wk0kk0 {
  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);
}
.wk0kk0[data-show="false"] {
  display: none;
  pointer-events: none;
}
.wk0kk1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.wk0kk1.large {
  width: 16px;
  height: 16px;
}
.wk0kk2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.wk0kk3 {
  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);
}
.wk0kk3:hover {
  box-shadow: 0 0 0 1px var(--affine-primary-color);
}
.wk0kk3.active {
  box-shadow: 0 0 0 1px var(--affine-primary-color);
}
.wk0kk4 {
  margin-left: 20px;
  margin-right: 8px;
}
.wk0kk5 {
  padding: 0px 10px;
  margin-right: 4px;
}
@keyframes rjrm5e1 {
  0% {
    opacity: 0;
    height: 0px;
  }
  100% {
    opacity: 1;
    height: var(--radix-collapsible-content-height);
  }
}
@keyframes rjrm5e2 {
  0% {
    opacity: 1;
    height: var(--radix-collapsible-content-height);
  }
  100% {
    opacity: 0;
    height: 0px;
  }
}
.rjrm5e0 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rjrm5e3 {
  overflow: hidden;
}
.rjrm5e3[data-state="open"] {
  animation: rjrm5e1 0.3s ease-in-out;
}
.rjrm5e3[data-state="closed"] {
  animation: rjrm5e2 0.3s ease-in-out;
}
.rjrm5e4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rjrm5e5 {
  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;
}
.rjrm5e5:hover {
  background: var(--affine-hover-color-filled);
}
.rjrm5e6 {
  flex: 1;
}
.rjrm5e7 {
  cursor: pointer;
}
.rjrm5e8 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
}
.rjrm5e9 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-disable-color);
}
.rjrm5ea {
  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;
}
.rjrm5ea:hover {
  background: var(--affine-hover-color);
}
.rjrm5e5:hover .rjrm5ea {
  opacity: 1;
}
.rjrm5eb {
  opacity: 0;
  font-size: 20px;
  color: var(--affine-icon-color);
  transition: transform 0.2s ease-in-out;
}
.rjrm5eb[data-collapsed="false"] {
  transform: rotate(90deg);
}
.rjrm5e5:hover .rjrm5eb, .rjrm5eb[data-collapsed="true"] {
  opacity: 1;
}
.rjrm5ec {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: transform 0.2s;
  color: inherit;
}
.rjrm5ec[data-collapsed="true"] {
  transform: rotate(-90deg);
}
.rjrm5ec[data-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
.rjrm5ec:hover {
  background: var(--affine-hover-color);
}
._15o7eh10 {
  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);
}
._15o7eh10:hover {
  background-color: var(--affine-hover-color);
}
._15o7eh10[aria-disabled] {
  color: var(--affine-text-disable-color);
}
._15o7eh10[aria-disabled]:hover {
  background-color: var(--affine-white-80);
  cursor: not-allowed;
}
._15o7eh11 {
  display: flex;
  justify-content: center;
  align-items: center;
}
._15o7eh12 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
._15o7eh13 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
}
._1fs3e40 {
  background-color: var(--affine-background-overlay-panel-color);
}
._1fs3e41 {
  background-color: var(--affine-v2-button-secondary);
}
.pbvcun0 {
  min-width: 220px;
}
.pbvcun1 {
  margin-left: 16px;
  -webkit-app-region: no-drag;
}
.pbvcun2 {
  padding-right: 8px;
}
.pbvcun3 {
  font-size: var(--affine-font-xs);
  flex-wrap: nowrap;
}
.pbvcun3[data-active="true"] {
  color: var(--affine-primary-color);
}
.pbvcun4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
  font-size: var(--affine-font-xs);
}
.pbvcun5 {
  font-weight: 400;
  color: var(--affine-text-secondary-color);
}
.pbvcun6 {
  padding: 4px 12px;
  height: 28px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  margin-bottom: 4px;
}
.pbvcun7 {
  padding: 4px 12px;
  height: 28px;
  font-size: var(--affine-font-xs);
}
.pbvcun8 {
  display: flex;
  flex-wrap: wrap;
  max-width: 200px;
  gap: 8px;
  padding: 4px 12px;
}
.pbvcun9 {
  color: var(--affine-text-disable-color);
}
.pbvcun9[data-active="true"] {
  color: var(--affine-text-primary-color);
}
.vybi880 {
  display: flex;
  align-items: center;
}
._7ka1of2 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 32px;
}
._7ka1of3 {
  display: flex;
  align-items: center;
}
._7ka1of4 {
  overflow-x: hidden;
  position: relative;
  height: 100%;
  gap: 8px;
}
._7ka1of5 {
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
._7ka1of6 {
  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;
}
._7ka1of2:hover ._7ka1of6 {
  max-width: var(--_7ka1of0);
}
._7ka1of7 {
  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%);
}
._7ka1of2:hover ._7ka1of7 {
  opacity: 1;
}
._7ka1of8 {
  height: 22px;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
}
._7ka1of8:last-child {
  min-width: -moz-max-content;
  min-width: max-content;
}
._7ka1of9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: var(--affine-text-primary-color);
  border-color: var(--affine-border-color);
}
._7ka1of9[data-focused=true] {
  border-color: var(--affine-primary-color);
}
._7ka1ofa {
  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;
}
._7ka1ofb {
  font-size: inherit;
  padding: 4px 12px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 30px;
}
._7ka1ofc {
  font-size: var(--affine-font-sm);
  background: var(--_7ka1of1);
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--affine-v2-database-border);
  gap: 4px;
}
._7ka1ofc[data-focused=true] {
  border-color: var(--affine-primary-color);
}
._7ka1ofd {
  font-size: var(--affine-font-h-5);
  right: 0;
  position: sticky;
  display: inline-flex;
}
._7ka1ofe {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--_7ka1of1);
}
._7ka1off {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._7ka1ofg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
._7ka1ofg:hover {
  background: var(--affine-hover-color);
}
.vl140z0 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}
.bdciln0[data-empty=true] {
  color: var(--affine-placeholder-color);
}
.bdciln0[data-readonly="true"] {
  pointer-events: none;
}
.bdciln1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}
.bdciln2 {
  gap: 20px;
}
.bdciln3 {
  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;
}
.bdciln4 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 12px 0px;
  min-height: 42px;
}
.bdciln2 .bdciln4 {
  border-radius: 12px;
  padding-bottom: 10px;
  background-color: var(--affine-v2-layer-background-primary);
}
.bdciln5 {
  height: 32px;
  width: 28px;
}
.bdciln6 {
  border-bottom-color: var(--affine-v2-tab-divider-divider);
}
.bdciln7 {
  flex-grow: 1;
  height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
.bdciln7::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
.bdciln7::placeholder {
  color: var(--affine-v2-text-placeholder);
}
.bdciln8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px 8px 8px;
  max-height: 400px;
  overflow: auto;
}
.bdciln2 .bdciln8 {
  padding: 0;
  max-height: none;
}
.bdciln9 {
  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);
}
.bdciln2 .bdciln9 {
  font-size: var(--affine-font-sm);
}
.bdcilna {
  overflow-x: hidden;
  position: relative;
  max-height: 200px;
  gap: 8px;
}
.bdciln2 .bdcilna {
  border-radius: 12px;
  background-color: var(--affine-v2-layer-background-primary);
  gap: 0;
  padding: 4px;
  max-height: none;
}
.bdcilnb {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 8px;
  height: 34px;
  gap: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.bdcilnb[data-focused=true] {
  background-color: var(--affine-hover-color);
}
.bdciln2 .bdcilnb {
  height: 44px;
}
.bdciln2 .bdcilnb[data-focused="true"] {
  height: 44px;
  background-color: transparent;
}
.bdcilnc {
  opacity: 0;
}
:is(.bdcilnb:hover, .bdciln2) .bdcilnc {
  opacity: 1;
}
.bdcilnc[data-state=open] {
  opacity: 1;
}
.bdcilnd {
  flex-grow: 1;
}
.bdcilne {
  padding: 10px 8px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-secondary-color);
  height: 34px;
}
.bdciln2 .bdcilne {
  height: 44px;
}
.bdcilng {
  transform: translateX(4px);
}
.bdcilnh {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: auto;
}
.bdcilnh[data-radix-scroll-area-viewport] > div {
  display: table !important;
}
.rnc121 {
  transform: translateX(4px);
}
.rnc122 {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow: auto;
}
.rnc122[data-radix-scroll-area-viewport] > div {
  display: table !important;
}
.rnc123 {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnc124 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.rnc125 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.rnc126 {
  height: auto;
  border-radius: 12px;
}
.rnc127 {
  color: var(--affine-v2-button-error);
}
.rnc128 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnc129 {
  flex: 1;
}
.rnc12a {
  opacity: 0;
  color: var(--affine-v2-button-primary);
  width: 20px;
  height: 20px;
}
.rnc12a[data-selected="true"] {
  opacity: 1;
}
.cgtllj0 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cgtllj1 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  margin-right: 6px;
}
.cgtllj2 {
  font-size: var(--affine-font-sm);
  line-height: 1.5em;
  color: var(--affine-text-primary-color);
}
.cgtllj3 {
  font-size: var(--affine-font-base);
  line-height: 1.6em;
  color: var(--affine-text-secondary-color);
  margin-right: 12px;
}
.cgtllj4 {
  color: var(--affine-primary-color);
  margin-right: 6px;
  font-size: 16px;
}
.cgtllj5 {
  color: var(--affine-icon-color);
  margin-right: 6px;
  font-size: 16px;
}
.yo5yor0 {
  height: 100px;
  align-items: center;
  padding: 48px 16px 20px 24px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  background: var(--affine-background-primary-color);
}
.yo5yor1 {
  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;
}
.yo5yor2 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
._165uswx0 {
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 12px;
  margin-right: 8px;
  height: 1px;
  background: var(--affine-border-color);
}
._198qzj40 {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  gap: 20px;
}
._198qzj41 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
._198qzj42 {
  color: var(--affine-text-secondary-color);
  font-size: 14px;
  line-height: 22px;
}
._198qzj43 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0px 20px;
  margin-bottom: 8px;
}
.am3w3r0 {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--affine-background-primary-color);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  height: 28px;
}
.am3w3r1 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
.u4ea3t0 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.u4ea3t1 {
  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);
}
._1ynzvui0 {
  padding: 3px 4px;
}
._1ynzvui1 {
  height: 100%;
  display: flex;
  gap: 2px;
  align-items: center;
}
._1ynzvui2 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._1ynzvui3 {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
  line-height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  white-space: nowrap;
}
._1ynzvui3:hover:not([data-disabled]) {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1ynzvui4 {
  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;
}
._4coa5j0 {
  border: 1px solid transparent;
  padding: 6px;
  padding-left: 5px;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  font-size: var(--affine-font-sm);
}
._4coa5j0:focus {
  border: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
}
._4coa5j0::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
._4coa5j0::placeholder {
  color: var(--affine-placeholder-color);
}
._4coa5j1 {
  padding: 0px;
}
._4coa5j2 {
  color: var(--affine-v2-icon-primary);
}
input._4coa5j3 {
  border: 1px solid var(--affine-blue-700);
}
.qv1ezo0 {
  padding-top: 3px;
  padding-bottom: 3px;
}
._1uptno60 {
  width: 100%;
}
._1uptno62 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._1uptno63 {
  width: 24px;
  height: 24px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1uptno64 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1uptno65 {
  top: calc(var(--radix-popper-anchor-height) - 18px) !important;
}
._1uptno66 {
  margin-left: 4px;
}
._1j55oju0 {
  padding: 3px 4px;
  display: flex;
  align-items: center;
}
._1j55oju1 {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
}
._5xyr6i0 {
  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;
}
._5xyr6i0::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
._5xyr6i0::placeholder {
  color: var(--affine-placeholder-color);
}
._5xyr6i1 {
  position: relative;
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
}
._5xyr6i2 {
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  position: relative;
  height: auto;
}
._5xyr6i3 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
._5xyr6i4 {
  outline: 1px solid transparent;
  padding: 6px;
}
._5xyr6i4:focus-within {
  outline: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._5xyr6i5 {
  border: none;
  white-space: break-spaces;
  word-break: break-word;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
._5xyr6i6 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
.aq3mem0 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
.aq3mem1 {
  flex: 1;
}
.aq3mem2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aq3mem3 {
  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);
}
.aq3mem4 {
  font-size: 18px;
  color: var(--affine-v2-icon-primary);
}
.zo4ozt0 {
  width: 100%;
  height: 100%;
}
.zo4ozt1 {
  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;
}
.zo4ozt2 {
  font-size: 24px;
}
.zo4ozt3 {
  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;
}
.zo4ozt3:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
.zo4ozt4 {
  position: absolute;
  padding: 5px 2px;
  color: var(--affine-v2-icon-secondary);
}
.zo4ozt5 {
  left: -4px;
  top: 50%;
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
}
.zo4ozt3:hover .zo4ozt5 {
  opacity: 1;
}
.zo4ozt6 {
  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;
}
.zo4ozt6[data-select-mode="true"] {
  width: 24px;
  margin-left: 0;
}
.zo4ozt7 {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zo4ozt8 {
  width: 0;
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.zo4ozt9 {
  height: 100%;
  flex-shrink: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
  min-width: 200px;
}
.zo4ozta {
  width: 0;
  flex: 1;
}
.zo4oztb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zo4oztc {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.zo4oztd {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
.zo4ozte {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.zo4ozth {
  --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;
}
.zo4ozt0[data-selected="true"] .zo4ozth {
  --ring-color: var(--affine-v2-layer-insideBorder-primaryBorder);
}
.zo4ozth:hover {
  border-color: var(--affine-v2-pagelist-hoverBorder);
}
[data-theme="light"] .zo4ozth {
  box-shadow: var(--light-shadow);
}
[data-theme="light"] .zo4ozth:hover {
  box-shadow: var(--light-shadow-hover);
}
[data-theme="dark"] .zo4ozth {
  box-shadow: var(--dark-shadow);
}
[data-theme="dark"] .zo4ozth:hover {
  box-shadow: var(--dark-shadow-hover);
}
.zo4ozti {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.zo4oztj {
  font-size: 24px;
  color: var(--affine-v2-icon-primary);
  line-height: 0;
}
.zo4oztk {
  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;
}
.zo4oztl {
  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;
}
.zo4oztm {
  width: 20px;
  height: 20px;
  font-size: 16px;
  padding: 2px;
  color: var(--affine-v2-icon-primary);
  pointer-events: none;
}
.zo4oztn {
  left: -4px;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
}
.zo4ozth:hover .zo4oztn {
  opacity: 1;
}
@container list-view-root (width <= 750px) {
  .zo4oztf {
    display: none;
  }
}
@container list-view-root (width <= 560px) {
  .zo4oztg {
    display: none;
  }
}
._88e1g40 {
  background: var(--affine-v2-layer-background-primary);
}
._88e1g41 {
  transition: width 0.2s ease-in-out;
}
.f7q3n20 {
  vertical-align: middle;
  font-size: 1.1em;
  transform: translate(2px, -1px);
  color: var(--affine-v2-icon-primary);
}
.f7q3n21 {
  text-decoration: none;
  color: inherit;
  word-break: break-word;
  hyphens: auto;
}
.f7q3n22 {
  color: var(--affine-v2-text-secondary);
  text-decoration: line-through;
}
affine-reference .affine-reference {
  color: inherit !important;
  text-decoration: none !important;
}
._17bw9gf0 {
  text-decoration: none;
  color: var(--affine-v2-text-link);
  white-space: wrap;
  word-break: break-all;
  display: inline;
}
._17bw9gf1 {
  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;
}
._17bw9gf1::-moz-placeholder {
  color: var(--affine-placeholder-color);
}
._17bw9gf1::placeholder {
  color: var(--affine-placeholder-color);
}
._17bw9gf2 {
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  position: relative;
  height: auto;
}
._17bw9gf3 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
._17bw9gf4 {
  position: relative;
  outline: 1px solid transparent;
  padding: 6px;
  display: block;
}
._17bw9gf4:focus-within {
  outline: 1px solid var(--affine-blue-700);
  box-shadow: var(--affine-active-shadow);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._17bw9gf5 {
  border: none;
  white-space: wrap;
  word-break: break-all;
  overflow: hidden;
  visibility: hidden;
  font-size: var(--affine-font-sm);
  line-height: 22px;
}
._17bw9gf6 {
  font-size: 17px;
  line-height: 26px;
  padding: 12px;
}
._17bw9gf7 {
  position: relative;
  background: var(--affine-v2-layer-background-primary);
  border-radius: 12px;
}
.whzfhk0 {
  color: var(--affine-v2-icon-primary);
  width: 20px;
  height: 20px;
}
.nttq7b0 {
  padding: 8px;
  width: 100%;
  max-width: 415px;
  box-sizing: border-box;
}
.nttq7b1 {
  padding: 0;
}
.nttq7b2 {
  width: 100%;
}
.nttq7b3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
}
.nttq7b4 {
  width: 100%;
  position: relative;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.nttq7b5 {
  flex-shrink: 0;
}
.nttq7b6 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
@keyframes _145oa013 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
._145oa010 {
  transform: rotate(-90deg);
}
._145oa011 {
  position: relative;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._145oa012 {
  transition: stroke-dasharray 0.3s ease-in-out;
}
._145oa014 {
  animation: _145oa013 1s linear infinite;
}
._1ser2vf0 {
  color: var(--affine-v2-icon-primary);
}
._1ser2vf1 {
  padding: 8px 0 0 0;
  width: 340px;
}
._1ser2vf2 {
  padding: 0;
  background-color: var(--affine-v2-layer-background-overlayPanel);
}
._1ser2vf3 {
  width: 100%;
  font-size: 12px;
}
._1ser2vf4 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: var(--affine-font-xs);
  gap: 8px;
  overflow: hidden;
}
._1ser2vf5 {
  color: var(--affine-v2-text-secondary);
}
._1ser2vf6 {
  color: #1E96F0;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
._1ser2vf7 {
  display: flex;
  flex-direction: column;
}
._1ser2vf8 {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  gap: 8px;
  overflow: hidden;
}
._1ser2vf9 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
._1ser2vfa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
._1ser2vfb {
  display: flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  color: var(--affine-v2-icon-primary);
}
._1ser2vfb:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1ser2vfc {
  width: 100%;
  position: relative;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
._1ser2vfd {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 24px;
}
._1ser2vfe {
  height: 136px;
  border-radius: 2px;
}
._1ser2vff {
  border-radius: 2px;
  height: 100%;
}
._1ser2vfg {
  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;
}
._1ser2vfh {
  height: 24px;
  border-radius: 2px;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1ser2vfi {
  display: flex;
  align-items: center;
  border-top: 1px solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
}
._1ser2vfj {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
}
._1ser2vfk {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
._1ser2vfl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
._1gciycz0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding: 8px;
  width: 214px;
}
._1gciycz1 {
  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);
}
._1gciycz1:focus-within {
  border-color: var(--affine-v2-layer-insideBorder-primaryBorder);
  box-shadow: var(--affine-active-shadow);
}
._1gciycz2 {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  line-height: 22px;
  padding: 0;
  color: var(--affine-v2-text-primary);
}
._1gciycz3 {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: auto;
}
._1gciycz4 {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1gciycz5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
  cursor: pointer;
  border-radius: 2px;
}
._1gciycz5:hover {
  background-color: var(--affine-v2-layer-background-tertiary);
}
._1gciycz6 {
  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(--affine-v2-button-secondary);
}
._1gciycz7 {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px;
  border-radius: 4px;
}
._1gciycz8 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  flex: 1;
}
._1gciycz9 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
._1gciycza {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
}
._1gciyczb {
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--affine-v2-text-primary);
  font-size: 14px;
  line-height: 22px;
}
.d146av0 {
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}
.d146av1 {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px;
}
.d146av2 {
  height: 100%;
  flex: 1;
}
.d146av3 {
  display: block;
}
.d146av3:has(affine-ai-panel-widget[data-state='generating']) {
  padding-bottom: 980px;
}
.d146av3:has(affine-ai-panel-widget[data-state='finished']) {
  padding-bottom: 980px;
}
.d146av3:has(affine-ai-panel-widget[data-state='error']) {
  padding-bottom: 980px;
}
.d146av4 {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
  cursor: text;
  flex-grow: 1;
}
.d146av5 {
  font-size: var(--affine-font-h-4);
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  margin-left: 4px;
  line-height: 0px;
}
.d146av6 {
  color: var(--affine-text-secondary-color);
}
.d146av7 {
  color: var(--affine-brand-color);
}
.d146av8 {
  vertical-align: middle;
  font-size: 1.1em;
  transform: translate(2px, -1px);
}
.d146av9 {
  display: flex;
  width: 100%;
  justify-content: center;
}
.d146ava {
  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) {
  .d146ava {
    padding: 0 16px;
  }
}
._1p8w9rm0 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  z-index: 2;
  pointer-events: none;
}
._1p8w9rm1 {
  display: flex;
  align-items: center;
  padding: 4px;
  margin-right: 8px;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
._1p8w9rm2 {
  display: flex;
  align-items: center;
  color: var(--affine-v2-icon-primary);
}
._1p8w9rm3 {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Inter;
}
._1p8w9rm4 {
  color: var(--affine-v2-text-primary);
  font-weight: 600;
  line-height: 30px;
}
._1p8w9rm5 {
  color: var(--affine-v2-text-secondary);
  font-weight: 400;
  line-height: 24px;
  font-size: 15px;
}
._1p8w9rm5[data-collapsed="true"] {
  color: var(--affine-v2-text-primary);
  font-weight: 500;
}
._1p8w9rm6 {
  padding: 4px;
  pointer-events: auto;
  color: var(--affine-v2-icon-transparentBlack);
  border-radius: 4px;
  gap: 0;
}
._1p8w9rm7 {
  font-weight: 500;
}
.ujbpy70 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: auto;
}
.ujbpy71 {
  padding: 4px 8px;
  color: var(--affine-v2-icon-primary);
  font-size: var(--affine-font-xs);
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ujbpy72 {
  font-size: 24px;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ujbpy73 {
  display: flex;
  color: var(--affine-v2-aI-errorText);
}
.ujbpy74 {
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  color: var(--affine-v2-button-primary);
  font-size: var(--affine-font-sm);
  font-weight: 500;
}
.ujbpy75 {
  font-size: 16px;
}
.affine-attachment-container:has(.ujbpy70) {
  border: none;
  overflow: visible;
}
._6ezgn90 {
  border-radius: 6px;
}
.x5qz4o1 {
  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);
}
.x5qz4o2 {
  font-size: 14px;
  line-height: 1.5;
  color: var(--affine-text-primary-color);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.x5qz4o0 [cmdk-root] {
  height: 100%;
}
.x5qz4o0 [cmdk-group-heading] {
  padding: 8px;
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  font-weight: 600;
  line-height: 1.67;
}
.x5qz4o0 [cmdk-group][hidden] {
  display: none;
}
.x5qz4o0 [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;
}
.x5qz4o0 [cmdk-list]:not([data-opening]) {
  transition: height .1s ease;
}
.x5qz4o0 [cmdk-list]::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.x5qz4o0 [cmdk-list]::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-clip: padding-box;
}
.x5qz4o0 [cmdk-list]:hover::-webkit-scrollbar-thumb {
  background-color: var(--affine-divider-color);
}
.x5qz4o0 [cmdk-list]:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--affine-icon-color);
}
.x5qz4o0 [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;
}
.x5qz4o0 [cmdk-item][data-selected=true] {
  background: var(--affine-background-secondary-color);
}
.x5qz4o0 [cmdk-item][data-selected=true][data-is-danger=true] {
  background: var(--affine-background-error-color);
  color: var(--affine-error-color);
}
.x5qz4o0 [cmdk-item][data-selected=true] .x5qz4o1 {
  color: var(--affine-icon-color);
}
.x5qz4o0 [cmdk-item][data-selected=true][data-is-danger=true] .x5qz4o1 {
  color: var(--affine-error-color);
}
.x5qz4o0 [cmdk-item][data-selected=true][data-is-danger=true] .x5qz4o2 {
  color: var(--affine-error-color);
}
.x5qz4o3 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.x5qz4o4 {
  display: flex;
  align-items: center;
  padding: 18px 16px 0;
  width: 100%;
}
.x5qz4o5 {
  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);
}
.x5qz4o6 {
  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;
}
.x5qz4o7 {
  padding-top: 12px;
  padding-bottom: 18px;
}
.x5qz4o8 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-h-5);
  width: 100%;
}
.x5qz4o8::-moz-placeholder {
  color: var(--affine-text-secondary-color);
}
.x5qz4o8::placeholder {
  color: var(--affine-text-secondary-color);
}
.x5qz4o9 {
  display: flex;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  min-width: 120px;
  flex-direction: row-reverse;
}
.x5qz4oa {
  display: flex;
  font-size: var(--affine-font-xs);
  -moz-column-gap: 2px;
       column-gap: 2px;
}
.x5qz4ob {
  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;
}
.x5qz4oc {
  font-size: var(--affine-font-base);
  line-height: 24px;
  font-weight: 400;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x5qz4od {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  text-align: justify;
}
.x5qz4oe {
  padding: 0px 8px 8px;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-status-error);
}
._1xj9c610 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._1xj9c611 {
  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 _1lj62r90 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes _1lj62r91 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
._1lj62r92 {
  position: fixed;
  inset: 0;
  background-color: transparent;
  z-index: var(--affine-z-index-modal);
}
._1lj62r93 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: var(--affine-z-index-modal);
  padding: 13vh 16px 16px;
}
._1lj62r95 {
  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;
}
._1lj62r95[data-state=entered], ._1lj62r95[data-state=entering] {
  animation: _1lj62r90 var(--_1lj62r94) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
._1lj62r95[data-state=exited], ._1lj62r95[data-state=exiting] {
  animation: _1lj62r91 var(--_1lj62r94) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
@media screen and (max-width: 520px) {
  ._1lj62r95 {
    min-width: auto;
  }
}
._1ele5qk0 {
  width: 100%;
  height: 100%;
}
._1yp0a7r0 {
  width: 100%;
  padding: 6px;
  min-height: 34px;
}
._1yp0a7r1 {
  padding: 0px !important;
}
._1m067uo0 {
  display: flex;
  flex-direction: column;
}
._1m067uo1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1m067uo2 {
  display: flex;
}
._1m067uo3 {
  margin: 8px 0;
}
._1m067uo4 {
  flex: 1;
}
._1m067uo5 {
  max-width: 50%;
  font-size: var(--affine-font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--affine-v2-text-tertiary);
}
._1m067uo6 {
  max-width: 110px;
  min-width: 60px;
}
._1m067uo7 {
  padding: 0 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1m067uo8 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
._1m067uo9 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
._1b54xud0 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
  padding: 8px 16px;
  min-width: 200px;
  text-transform: uppercase;
}
._1b54xud1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 200px;
}
._66h2oc0 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._66h2oc1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--affine-icon-color);
  font-size: var(--affine-font-sm);
  font-weight: 500;
  padding: 0 6px;
  gap: 8px;
  justify-content: space-between;
}
._66h2oc2 {
  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;
}
._66h2oc2:hover {
  background-color: var(--affine-hover-color);
}
._66h2oc2[data-active=true] {
  color: var(--affine-primary-color);
}
._66h2oc3 {
  font-size: var(--affine-font-h-5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--affine-border-color);
  background: var(--affine-background-secondary-color);
  cursor: pointer;
}
._66h2oc3:hover:not([data-readonly=true]) {
  background-color: var(--affine-background-tertiary-color);
}
._66h2oc3[data-readonly=true] {
  cursor: default;
}
._66h2oc4 {
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
._66h2oc5 {
  transform: translateX(4px);
}
._66h2oc6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  padding: 8px 12px;
  min-width: 200px;
  text-transform: uppercase;
}
.tsmuby0 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
  padding: 8px 0px;
  min-width: 260px;
}
.tsmuby1 {
  padding: 8px 20px;
}
.tsmuby2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--affine-font-sm);
  padding: 8px 4px;
  min-width: 260px;
}
.tsmuby3 {
  padding: 8px 20px;
}
.tsmuby4 {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tsmuby5 {
  color: var(--affine-v2-text-primary);
  font-size: var(--affine-font-sm);
  padding: 0 8px;
  display: flex;
  align-items: center;
}
.tsmuby6 {
  padding: 10px 16px;
}
._4io2bg2 {
  --_4io2bg0: 160px;
  --_4io2bg1: var(--affine-font-sm);
  width: 100%;
  font-family: var(--affine-font-sans-family);
  padding-bottom: 18px;
}
._4io2bg3 {
  display: flex;
  height: 30px;
  padding: 4px;
  margin-bottom: 8px;
  justify-content: space-between;
  align-items: center;
  color: var(--affine-v2-text-secondary);
  font-weight: 500;
}
._4io2bg4 {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  cursor: pointer;
  font-size: 20px;
}
._4io2bg5 {
  color: var(--affine-v2-text-secondary);
}
._4io2bg6 {
  padding: 0 6px;
  cursor: pointer;
  border-radius: 4px;
}
._4io2bg6:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._4io2bg7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--affine-font-sm);
}
._4io2bg8 {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 8px;
  cursor: default;
  padding: 0 6px;
}
._4io2bg9 {
  height: 0;
  border-top: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  width: 100%;
  margin: 8px 0;
}
._4io2bga {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._4io2bgb {
  display: flex;
  flex-direction: column;
  position: relative;
}
._4io2bgc {
  display: flex;
  flex-direction: row;
  padding-top: 2px;
}
[data-property-collapsed="true"] ._4io2bgc {
  display: none;
}
._4io2bgd {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-tertiary);
  padding: 0 4px;
  height: 30px;
  font-weight: 400;
  gap: 6px;
  width: 160px;
  border-radius: 4px;
  justify-content: start;
}
._4io2bgd svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._4io2bgd:hover svg {
  color: var(--affine-v2-icon-primary);
}
._4io2bge {
  opacity: 0;
}
._4io2bgc:hover ._4io2bge {
  opacity: 1;
}
._4io2bgf {
  transition: transform 0.2s ease-in-out;
}
._4io2bgf[data-collapsed="true"] {
  transform: rotate(90deg);
}
._4io2bgg {
  background: var(--affine-v2-layer-white);
  max-width: calc(var(--affine-editor-width) / 2);
  width: 100%;
  max-height: 30vh;
  overflow-y: auto;
}
._4io2bgh:has([data-property-value][data-empty="true"]) {
  display: none;
}
@container viewport (width <= 640px) {
  ._4io2bg2 {
    --_4io2bg1: var(--affine-font-xs);
  }
}
@media print {
  ._4io2bg3 {
    display: none;
  }
  ._4io2bg9 {
    display: none;
  }
  ._4io2bga[data-state="open"] {
    margin-bottom: 32px;
  }
  ._4io2bgd {
    display: none;
  }
}
._17on77y0 {
  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);
}
._17on77y1 {
  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);
}
._17on77y1:has(>:hover) {
  cursor: pointer;
  background: var(--affine-hover-color);
  border-radius: 4px;
}
._17on77y1:empty {
  display: none;
}
._17on77y2 {
  color: var(--affine-v2-text-placeholder);
}
._17on77y3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._17on77y4 {
  font-size: 18px;
  margin-right: 6px;
  padding: 1px 0;
  display: flex;
  align-items: center;
  color: var(--affine-icon-color);
}
._17on77y5 {
  color: var(--affine-v2-status-error);
}
._17on77y6 {
  color: var(--affine-v2-text-disable);
}
._17on77y7 {
  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;
}
._17on77y7:hover {
  cursor: pointer;
  background: var(--affine-hover-color);
  border-radius: 4px;
}
.ymxltl0 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ymxltl1 {
  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;
}
.ymxltl1[data-draft="true"] {
  border-style: dashed;
}
.ymxltl2 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
}
.ymxltl3 {
  display: flex;
  flex-direction: row;
  margin: 2px 2px;
  align-items: center;
  gap: 4px;
}
.ymxltl4 {
  font-weight: 500;
  line-height: 22px;
  font-size: var(--affine-font-sm);
  color: var(--affine-text-primary-color);
}
.ymxltl4:first-child {
  margin-left: 12px;
}
.ymxltl5 {
  font-size: 20px;
  color: var(--affine-icon-color);
}
.ymxltl6 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-primary-color);
}
.ymxltl7 {
  width: 230px;
}
.ymxltl8 {
  height: 32px;
}
._1i4d9ol0 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
._1i4d9ol1 {
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
  min-height: 64px;
}
._1i4d9ol2 {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 20px 20px 20px 24px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.2px;
}
._1i4d9ol3 {
  height: 0;
  flex: 1;
}
._1i4d9ol4 {
  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;
}
._1i4d9ol5 {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 500;
}
._1i4d9ol6 {
  display: flex;
  align-items: center;
  gap: 7px;
}
._1i4d9ol7 {
  color: var(--affine-primary-color);
}
._1i4d9ol8 {
  padding: 4px 18px;
}
._1i4d9ol9 {
  display: flex;
  gap: 20px;
}
._1i4d9ola {
  padding: 4px 18px;
}
._1qvekgx0 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
._1qvekgx1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 16px 16px 8px 16px;
}
._1qvekgx2 {
  width: 100%;
}
._1qvekgx3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q4ftbg0 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q4ftbg1 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.q4ftbg2 {
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
  border-top: 1px solid var(--affine-v2-layer-insideBorder-border);
  flex-wrap: wrap;
  gap: 12px;
}
.q4ftbg3 {
  border-top: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.q4ftbg4 {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--affine-text-secondary-color);
  padding: 8px;
  padding-bottom: 0;
}
.q4ftbg5 {
  flex: 2;
  flex-direction: column;
  border-left: 1px solid var(--affine-v2-layer-insideBorder-border);
  overflow-x: hidden;
  overflow-y: auto;
}
.q4ftbg6 {
  overflow: hidden;
  font-weight: 600;
}
.q4ftbg7 {
  text-decoration: line-through;
}
.q4ftbg8 {
  padding: 0 8px;
  color: var(--affine-text-secondary-color);
}
.q4ftbg9 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
}
.q4ftbga {
  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;
}
.q4ftbgb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 22px;
}
.q4ftbgc {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.q4ftbgd {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.q4ftbge {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 16px 16px 8px 16px;
}
.q4ftbgf {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.q4ftbgg {
  display: flex;
  overflow: hidden;
  flex: 1;
}
.q4ftbgh {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.q4ftbgi {
  margin-left: 20px;
}
.q4ftbgj {
  width: 100%;
}
.q4ftbgk {
  color: var(--affine-primary-color);
}
.q4ftbgl {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
.q4ftbgm {
  color: var(--affine-primary-color);
  font-style: italic;
  font-weight: 800;
}
.q4ftbgn {
  padding: 4px 12px;
  border-radius: 8px;
}
.q4ftbgo {
  min-width: 80px;
}
.q4ftbgp {
  background-color: var(--affine-hover-color-filled);
}
.q4ftbgq {
  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);
}
._5rugpi0 {
  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: var(--affine-font-base);
}
._5rugpi1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._5rugpi2 {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: var(--affine-text-primary-color);
}
._5rugpi3 {
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--affine-border-color);
  background-color: var(--affine-v2-button-secondary);
  text-align: center;
  font-size: 12px;
  line-height: 28px;
  font-weight: 500;
  color: var(--affine-text-primary-color);
  cursor: pointer;
}
._5rugpi4 {
  margin-bottom: 16px;
}
._5rugpi5 {
  color: var(--affine-text-secondary-color);
  height: 32px;
  line-height: 32px;
}
._5rugpi6 {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  border-radius: 4px;
}
._5rugpi6:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._5rugpi6 .affine-reference-title {
  border-bottom: none;
}
._5rugpi6 svg {
  color: var(--affine-v2-icon-secondary);
}
._5rugpi6:hover svg {
  color: var(--affine-v2-icon-primary);
}
._5rugpi7 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
}
._5rugpi8 {
  --affine-font-family: var(--affine-font-sans-family);
  cursor: default;
  border: 0.5px solid var(--affine-v2-backlinks-blockBorder);
  border-radius: 8px;
  padding: 8px;
  color: var(--affine-v2-text-primary);
  background-color: var(--affine-v2-backlinks-blockBackgroundColor);
}
._5rugpi8:hover {
  background-color: var(--affine-v2-backlinks-blockHover);
}
._5rugpi8 * {
  cursor: default;
}
._5rugpi9 {
  color: var(--affine-v2-text-secondary);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
._5rugpia {
  cursor: pointer;
}
._5rugpib {
  transition: all 0.2s ease-in-out;
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
._5rugpib[data-collapsed="true"] {
  transform: rotate(90deg);
  color: var(--affine-v2-icon-secondary);
}
@media print {
  ._5rugpi0 {
    display: none;
  }
}
@container viewport (width <= 640px) {
  ._5rugpi0 {
    padding: 0 24px;
  }
}
._15g062m0 {
  width: 64px;
  height: 64px;
  padding: 2px;
}
._15g062m0[data-icon-type="emoji"], ._15g062m0[data-icon-type="affine-icon"] {
  font-size: 60px;
  line-height: 1;
}
._15g062m0[data-icon-type="emoji"] {
  font-family: Inter;
}
._15g062m0::after {
  display: none;
}
._15g062m1 {
  padding: 4px;
}
._15g062m2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._15g062m3 {
  color: var(--affine-v2-icon-secondary);
  font-size: 16px;
}
._15g062m4 {
  color: var(--affine-v2-text-secondary);
  font-size: 12px;
}
@media print {
  .doc-icon-container[data-has-icon="false"] {
    display: none;
  }
}
._1xawy2v0 {
  padding-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
._1xawy2v1 {
  display: flex;
  gap: 12px;
  align-items: center;
}
._1xawy2v2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 40px;
  background-color: var(--affine-v2-layer-background-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}
._1xawy2v2: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;
}
._1xawy2v2:hover:before {
  opacity: 1;
}
._1xawy2v2[data-active="true"]:before {
  opacity: 1;
}
._1xawy2v3 {
  font-size: 20px;
  line-height: 0;
  color: var(--affine-v2-icon-primary);
}
._1xawy2v4 {
  color: var(--affine-v2-icon-activated);
}
._1xawy2v5 {
  font-size: 15px;
  line-height: 24px;
  white-space: nowrap;
}
._1nrv1ec0 {
  width: calc(100% + 20px);
  padding: 10px 10px 20px 10px;
  margin-left: -10px;
}
._1nrv1ec1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0px;
}
._1nrv1ec2 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
._1nrv1ec3 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  border: 1px solid var(--affine-v2-layer-insideBorder-blackBorder);
}
._1nrv1ec4 {
  border-radius: 4px;
  padding: 8px 10px;
}
._1nrv1ec5 {
  border-radius: 8px;
  padding: 10px;
}
.tiygav0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tiygav1 {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  font-size: 16px;
  color: var(--affine-v2-icon-primary);
}
.tiygav1.open {
  transform: rotate(180deg);
}
.tiygav2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tiygav3 {
  padding: 4px;
  gap: 8px;
}
.tiygav4 {
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
._11lp7w90 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.c60ueb0 {
  font-weight: 500;
  color: var(--affine-text-primary-color);
}
.c60ueb0[data-editing="true"] {
  -webkit-app-region: no-drag;
}
._1hvfho80 {
  max-width: 480px;
  min-width: 360px;
  padding: 20px 0;
  align-self: start;
  margin-top: 120px;
}
._1hvfho81 {
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 2px;
}
._1hvfho82 {
  font-size: var(--affine-font-h-2);
  font-weight: 600;
  min-height: 42px;
  padding: 0;
}
._1hvfho83 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  width: 160px;
}
._1hvfho84 {
  max-height: calc(100vh - 220px);
  padding: 0 24px;
}
._1hvfho85 {
  width: 6px;
  transform: translateX(-4px);
}
._1hvfho86 {
  width: 0;
  height: 0;
  position: absolute;
}
._1hvfho87 {
  margin-top: 20px;
  border-bottom: 4px;
}
._1hvfho88 {
  display: flex;
  flex-direction: column;
  position: relative;
}
._1hvfho89 {
  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"] ._1hvfho89 {
  display: none;
}
._1hvfho89 svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
._1hvfho89:hover svg {
  color: var(--affine-v2-icon-primary);
}
@media print {
  ._1hvfho89 {
    display: none;
  }
}
.k8vk1l0 {
  width: 100%;
  border-radius: 4px;
  color: var(--affine-v2-text-primary);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;
}
.k8vk1l0:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.k8vk1l0 svg {
  color: var(--affine-v2-icon-secondary);
  font-size: 16px;
  transform: none;
}
.k8vk1l0:hover svg {
  color: var(--affine-v2-icon-primary);
}
.k8vk1l0 span {
  font-size: var(--affine-font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom-color: transparent;
}
.tf0zs90 {
  max-width: 480px;
  min-width: 360px;
  padding: 20px 0;
  align-self: start;
  margin-top: 120px;
  max-height: calc(100dvh - 240px);
  overflow: auto;
}
.tf0zs91 {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.tf0zs92 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
}
.tf0zs93 {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px;
  width: 160px;
}
.tf0zs94 {
  max-height: calc(100vh - 220px);
  padding: 0 24px;
}
.tf0zs95 {
  width: 6px;
  transform: translateX(-4px);
}
.tf0zs96 {
  width: 0;
  height: 0;
  position: absolute;
}
.tf0zs97 {
  margin-top: 20px;
  border-bottom: 4px;
}
.tf0zs98 {
  display: flex;
  flex-direction: column;
  position: relative;
}
.tf0zs99 {
  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"] .tf0zs99 {
  display: none;
}
.tf0zs99 svg {
  font-size: 16px;
  color: var(--affine-v2-icon-secondary);
}
.tf0zs99:hover svg {
  color: var(--affine-v2-icon-primary);
}
@media print {
  .tf0zs99 {
    display: none;
  }
}
._4ldf70 {
  width: 100%;
}
._10xpdz20 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--affine-v2-text-primary);
  padding: 16px;
}
._10xpdz21 {
  width: 36px;
  height: 36px;
  color: var(--affine-v2-icon-primary);
}
._10xpdz22 {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}
._10xpdz23 {
  text-align: center;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 20px;
}
._10xpdz24 {
  width: 100%;
  font-size: 14px;
  height: 42px;
}
._10xpdz25 {
  max-width: 352px;
}
._10xpdz26 {
  margin: 0 -16px;
  width: calc(100% + 32px);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  padding: 0 16px;
}
._10xpdz27 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
}
._10xpdz28 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
._10xpdz29 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: 26px;
}
._10xpdz2a {
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 24px;
  color: var(--affine-text-secondary-color);
}
._10xpdz2b {
  width: 100%;
}
._10xpdz2c {
  width: 100%;
  margin-top: 20px;
}
._1ec1s8g0 {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  gap: 12px;
}
._1ec1s8g1 {
  width: 100%;
  height: auto;
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: var(--affine-line-height);
}
._1ec1s8g2 {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1ec1s8g3 {
  top: 24px;
  right: 24px;
}
._1ec1s8g4 {
  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);
}
._1ec1s8g5 {
  color: var(--affine-link-color);
  cursor: pointer;
}
._1ec1s8g6 {
  width: 100%;
  font-size: var(--affine-font-base);
  line-height: var(--affine-line-height);
  font-weight: 400;
  color: var(--affine-text-primary-color);
}
._1ec1s8g7 {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: end;
  margin-top: 20px;
}
._1ec1s8g8 {
  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);
}
._1ec1s8g8:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
  cursor: pointer;
  transition: background .30s;
}
._1ec1s8g9 {
  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;
}
._1ec1s8ga {
  margin-right: auto;
}
._1ec1s8gb {
  margin-left: auto;
}
.guho1x0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--affine-v2-text-primary);
  padding: 16px;
}
.guho1x1 {
  width: 36px;
  height: 36px;
  color: var(--affine-v2-icon-primary);
}
.guho1x2 {
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}
.guho1x3 {
  text-align: center;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 20px;
}
.guho1x4 {
  width: 100%;
  font-size: 14px;
  height: 42px;
}
.guho1x5 {
  max-width: 400px;
}
.guho1x6 {
  margin: 0 -16px;
  width: calc(100% + 32px);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  padding: 6px;
}
._1hntonq0 {
  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;
}
._1hntonq0:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1hntonq0.active {
  color: var(--affine-v2-text-emphasis);
  cursor: default;
  pointer-events: none;
}
._1hntonq0.label {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
._1hntonq0.disabled {
  opacity: .4;
  cursor: default;
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
._1hntonq0 a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
._1hntonq1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
._1pqptjr0 {
  border-bottom: 1px solid var(--affine-border-color);
  padding-bottom: 16px;
  margin-bottom: 24px;
  white-space: pre-wrap;
}
._1pqptjr0 .title {
  font-size: var(--affine-font-base);
  font-weight: 600;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
._1pqptjr0 .subtitle {
  padding-top: 4px;
  padding-bottom: 8px;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._1pqptjr1 {
  border-bottom: 1px solid var(--affine-border-color);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
._1pqptjr1:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
._1pqptjr2 {
  opacity: 0.5;
  pointer-events: none;
}
._1pqptjr1 .title {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 18px;
  color: var(--affine-text-secondary-color);
  margin-bottom: 16px;
}
._1pqptjr3 {
  margin-bottom: 25px;
  color: var(--affine-text-primary-color);
  border-radius: 8px;
}
._1pqptjr3.two-col {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._1pqptjr3:last-of-type {
  margin-bottom: 0;
}
._1pqptjr3.disabled {
  position: relative;
}
._1pqptjr3.disabled::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}
._1pqptjr3 .left-col {
  flex: 1;
  max-width: 100%;
}
._1pqptjr3.two-col .left-col {
  flex-shrink: 0;
  max-width: 80%;
}
._1pqptjr3 .name {
  margin-bottom: 2px;
  font-size: var(--affine-font-sm);
  font-weight: 600;
}
._1pqptjr3 .desc {
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
}
._1pqptjr3 .right-col {
  display: flex;
  justify-content: flex-end;
  padding-left: 15px;
  flex-shrink: 0;
}
._1pqptjr4 {
  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;
}
._1yssrg50 {
  font-weight: 500;
  font-size: 15px;
}
._1yssrg51 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
  line-height: 22px;
}
._1yssrg52.plain {
  color: var(--affine-brand-color);
}
._1yssrg53.plain {
  color: var(--affine-text-primary-color);
}
._1nturvx0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._1nturvx1 {
  flex-grow: 1;
  margin-right: 20px;
}
._1nturvx1 .storage-progress-desc {
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
._1nturvx1 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--affine-black-10);
  overflow: hidden;
}
._1nturvx2 {
  height: 100%;
}
._1tagkfn0 {
  margin-left: 20px;
}
._1tagkfn0 label {
  display: block;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  margin-bottom: 4px;
}
._1tagkfn1 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
._1tagkfn1.disable {
  cursor: default;
  pointer-events: none;
}
._1tagkfn1:hover .camera-icon-wrapper {
  display: flex;
}
._1tagkfn1 .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: var(--affine-font-h-4);
}
._1tagkfn2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
._1tagkfn3 {
  padding-left: 0;
  padding-right: 0;
}
._1tagkfn4 {
  margin-top: 12px;
}
._1mht5yj0 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._1mht5yj1 {
  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;
}
._1mht5yj2 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  height: 9px;
  width: 100%;
}
._1mht5yj3 {
  --radix-scroll-area-thumb-height: 4px;
  background: var(--affine-icon-secondary);
  opacity: 0.6;
  overflow: hidden;
  height: 4px;
  border-radius: 4px;
}
._1mht5yj4 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--affine-link-color);
  background: transparent;
  border-color: transparent;
  font-size: var(--affine-font-xs);
}
._1mht5yj5 {
  display: flex;
  align-items: start;
  margin-bottom: 8px;
}
._1mht5yj6 {
  width: 0;
  flex: 1;
}
._1mht5yj7 {
  font-weight: 600;
  font-size: var(--affine-font-base);
  line-height: 22px;
}
._1mht5yj8 {
  font-weight: 400;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
.kb1pbw0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 4px;
}
.kb1pbw1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kb1pbw2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.kb1pbw3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
.kb1pbw4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb1pbw5 {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background: var(--affine-v2-layer-background-primary);
}
.kb1pbw6 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.kb1pbw7 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--affine-v2-layer-background-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--affine-v2-text-secondary);
}
.kb1pbw8 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb1pbw9 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.kb1pbwa {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
}
.kb1pbwb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-status-error);
}
.kb1pbwc {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--affine-v2-status-error);
}
.kb1pbwd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kb1pbwe {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.kb1pbwf {
  font-size: 11px;
  line-height: 16px;
  color: var(--affine-v2-text-secondary);
}
.kb1pbwg {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  padding: 12px 0;
}
.kb1pbwh {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kb1pbwi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kb1pbwj {
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
}
.kb1pbwk {
  width: 100%;
  justify-content: space-between;
}
.kb1pbwl {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
}
.kb1pbwm {
  color: var(--affine-v2-text-primary);
  text-decoration: underline;
}
.kb1pbwn {
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-status-error);
}
.kb1pbwo {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.p94xoq0 {
  height: 18px;
  display: flex;
  align-items: center;
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  font-weight: 600;
  margin-bottom: 12px;
}
.p94xoq0:last-of-type {
  margin-bottom: 0;
}
.p94xoq0 .icon {
  color: var(--affine-icon-color);
  font-size: var(--affine-font-base);
  margin-left: 5px;
}
.p94xoq1 {
  display: grid;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  gap: 2%;
}
.p94xoq2 {
  border-radius: 8px;
  border: 1px solid var(--affine-border-color);
  color: var(--affine-text-primary-color);
  cursor: pointer;
  padding: 6px 8px;
}
.p94xoq2 svg {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 2px;
}
.p94xoq2 p {
  font-size: var(--affine-font-xs);
  text-align: center;
}
.p94xoq3 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.p94xoq3.active {
  color: var(--affine-text-emphasis-color);
}
.p94xoq3.error {
  color: var(--affine-error-color);
}
.p94xoq3 svg {
  margin-right: 4px;
}
.p94xoq4 {
  flex-direction: row-reverse;
}
.p94xoq4.two-col {
  justify-content: flex-end;
}
.p94xoq4 .right-col {
  padding-left: 0;
  padding-right: 20px;
}
.p94xoq5 {
  margin-top: 12px;
}
._1ay322n0 {
  background: var(--affine-white);
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._1ay322n1 {
  color: var(--affine-text-primary-color);
}
._1ay322n1[data-selected=true] {
  color: var(--affine-primary-color);
}
._1ay322n2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 8px;
}
._162gq1y0 {
  background: var(--affine-white);
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._162gq1y1 {
  color: var(--affine-text-primary-color);
}
._162gq1y1[data-selected=true] {
  color: var(--affine-primary-color);
}
.xrsld80 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
  max-width: 250px;
}
._1hy3yhq0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  background: var(--affine-v2-layer-background-primary);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  overflow: hidden;
}
._1hy3yhq1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1hy3yhq2 {
  display: flex;
  padding: 8px 8px 8px 16px;
  height: 60px;
  align-items: center;
  gap: 12px;
}
._1hy3yhq2:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
._1hy3yhq3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._1hy3yhq4 {
  flex: 1;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--affine-font-sm);
}
._1hy3yhq5 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
}
._1hy3yhq6 {
  flex: 1;
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
._1hy3yhq7 {
  padding-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
}
._1hy3yhq8 {
  padding-bottom: 4px;
}
._11nsxg81 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
._11nsxg82 {
  width: 100%;
}
._11nsxg83 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 8px;
}
._11nsxg84 {
  flex: 1 0 0;
}
._11nsxg85 {
  width: auto !important;
}
._11nsxg86 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
}
._11nsxg87 {
  font-size: var(--affine-font-base);
}
._11nsxg88 {
  margin-top: 24px;
}
._11nsxg89 {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.dangerous-setting .name {
  color: var(--affine-v2-status-error);
}
._11nsxg8a {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
}
._11nsxg8b {
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-text-emphasis-color);
  cursor: pointer;
}
._11nsxg8c {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._11nsxg8d {
  display: flex;
  flex-direction: column;
  min-height: 72px;
  align-items: center;
  justify-content: center;
}
._11nsxg8e {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
._11nsxg8f {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
._11nsxg8g {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
._11nsxg8g > a {
  color: var(--affine-brand-color);
  font-weight: 500;
}
._11nsxg8h {
  display: flex;
  flex-direction: column;
  align-items: end;
}
._11nsxg8i {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--affine-v2-text-primary);
}
._11nsxg8j {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
}
._11nsxg8k {
  display: flex;
  align-items: center;
  gap: 16px;
}
._11nsxg8l {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  color: var(--affine-v2-text-primary);
  line-height: 22px;
}
._11nsxg8m {
  display: flex;
  gap: 4px;
  color: var(--affine-v2-button-primary);
}
._11nsxg8m.past-due {
  color: var(--affine-v2-button-error);
}
._11nsxg8n {
  font-size: var(--affine-font-xs);
  font-weight: 500;
}
._11nsxg8o {
  width: 14px;
  height: 14px;
}
._1exg61z0 {
  width: 100%;
}
._1exg61z1 {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
._1exg61z2 {
  font-weight: 400;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._1exg61z3 {
  font-weight: 600;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-brand-color);
}
._1exg61z4 {
  margin-left: 4px;
  color: var(--affine-brand-color);
  font-weight: 400;
}
._1exg61z5:first-letter {
  text-transform: uppercase;
}
._1exg61z6 {
  font-size: var(--affine-font-xs);
  line-height: 20px;
  display: flex;
  gap: 8px;
}
._1exg61z6 > span {
  color: var(--affine-text-secondary-color);
}
._1exg61z7 {
  padding-right: calc(var(--setting-modal-gap-x) + 30px);
  display: flex;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
._1exg61z8 {
  background-color: var(--affine-background-primary-color);
  min-height: 426px;
  min-width: 258px;
  border-radius: 16px;
  border: 1px solid var(--affine-border-color);
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.23s ease;
}
._1exg61z8::before {
  content: "";
  position: absolute;
  right: calc(100% + var(--setting-modal-gap-x));
  scroll-snap-align: start;
}
._1exg61z8[data-current="true"] {
  border-color: transparent;
}
._1exg61z9 {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
._1exg61z9::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: linear-gradient(180deg, var(--affine-brand-color), #1E96EB33) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.23s ease;
}
._1exg61z8[data-current="true"] ._1exg61z9::after {
  opacity: 1;
}
._1exg61zb {
  background-color: var(--affine-brand-color);
  color: var(--affine-white);
  padding: 0px 6px;
  border-radius: 4px;
  height: 24px;
  display: inline-block;
}
._1exg61zc {
  color: var(--affine-text-emphasis-color);
  margin-left: 8px;
  line-height: 20px;
  font-size: var(--affine-font-xs);
  font-weight: 500;
  border-radius: 4px;
  display: inline-block;
  height: 100%;
}
._1exg61zd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--affine-background-overlay-panel-color);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--affine-border-color);
  font-weight: 600;
  overflow: hidden;
  position: relative;
}
._1exg61zd > :not(._1exg61ze) {
  position: relative;
}
._1exg61zf {
  font-weight: 600;
  font-size: var(--affine-font-xs);
  line-height: 20px;
}
._1exg61zg {
  font-weight: 400;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
  margin-bottom: 8px;
}
._1exg61zh {
  font-weight: 600;
  font-size: var(--affine-font-base);
  line-height: 20px;
  height: 20px;
}
._1exg61zi {
  font-weight: 500;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
  margin-left: 4px;
}
._1exg61zj {
  min-height: 28px;
  line-height: 1;
  display: flex;
  align-items: flex-end;
}
._1exg61zk {
  font-size: var(--affine-font-h-5);
  margin-right: 8px;
}
._1exg61zl {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-sm);
}
._1exg61zm {
  width: 100%;
}
._1exg61zo[data-show-hover="true"], ._1exg61zn:hover ._1exg61zo[data-show-hover="false"] {
  display: none;
}
._1exg61zo[data-show-hover="false"], ._1exg61zn:hover ._1exg61zo[data-show-hover="true"] {
  display: block;
}
._1exg61zp {
  font-size: var(--affine-font-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}
._1exg61zq {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._1exg61zr {
  font-weight: 500;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._1exg61zs {
  display: flex;
  gap: 8px;
  line-height: 20px;
  align-items: normal;
}
._1exg61zt {
  display: flex;
  align-items: center;
  height: 20px;
}
._1exg61zt > svg {
  color: var(--affine-brand-color);
}
._1exg61zu {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-xs);
}
._1exg61zv {
  padding: 12px 0 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._1exg61zw {
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--affine-text-primary-color);
}
._1exg61zx {
  font-size: 14px;
  line-height: 22px;
  color: var(--affine-text-secondary-color);
}
._1exg61zy {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 20px;
}
._1exg61zz {
  color: var(--affine-text-emphasis-color);
}
._1exg61z10 {
  color: var(--affine-text-secondary-color);
  font-size: 12px;
  line-height: 20px;
}
._1exg61z11 {
  text-decoration: underline;
}
.cniq4m2 {
  position: relative;
  width: 100%;
  min-height: 200px;
  border-radius: 16px;
  padding: 20px 24px;
  border: 1px solid var(--affine-border-color);
  overflow: hidden;
  background: var(--affine-white);
}
.cniq4m3 {
  position: relative;
  z-index: 3;
}
.cniq4m4 {
  --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;
}
.cniq4m4::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-theme="dark"] .cniq4m4 {
  --dot: rgba(255,255,255,0.1);
}
.cniq4m2[data-type="1"] .cniq4m4::after {
  background: linear-gradient(231deg, transparent 0%, var(--affine-white) 80%);
}
.cniq4m2[data-type="2"] .cniq4m4::after {
  background: linear-gradient(290deg, transparent 0%, var(--affine-white) 40%);
}
.cniq4m4 > svg.affine-svg {
  --cniq4m0: #fff;
  --cniq4m1: #fff;
  position: absolute;
  z-index: 0;
}
[data-theme='dark'] .cniq4m4 > svg.affine-svg {
  --cniq4m0: #8C8C8C;
  --cniq4m1: #262626;
}
 .cniq4m4 > svg.icons-svg {
  color: rgba(0,0,0,0.1);
  position: absolute;
  z-index: 2;
}
[data-theme='dark'] .cniq4m4 > svg.icons-svg {
  color: transparent;
}
.cniq4m2[data-type="1"] .cniq4m4 > svg.affine-svg {
  right: -150px;
  top: -100px;
}
.cniq4m2[data-type="1"] .cniq4m4 > svg.icons-svg {
  right: -20px;
  top: 130px;
  opacity: 0.5;
}
.cniq4m2[data-type="2"] .cniq4m4 > svg.affine-svg {
  position: absolute;
  right: -140px;
  bottom: -130px;
  transform: scale(0.58);
}
.cniq4m2[data-type="2"] .cniq4m4 > svg.icons-svg {
  position: absolute;
  right: 148px;
  bottom: 16px;
  opacity: 0.5;
}
.cniq4m2[data-type="2"] .cniq4m4 > svg.icons-svg .star {
  display: none;
}
.bvsgx40 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bvsgx41 {
  display: flex;
  gap: 8px;
  align-items: start;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
}
.bvsgx41 svg {
  width: 20px;
  height: 20px;
  color: var(--affine-brand-color);
}
._1owwggq0 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
  max-width: 250px;
}
._1owwggq1 {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 100px;
  max-width: 250px;
}
._1owwggq2 {
  background: white;
  width: 250px;
  max-height: 30vh;
  overflow-y: auto;
}
._1owwggq3 {
  text-transform: capitalize;
  font-weight: 600;
  width: 250px;
}
._1owwggq4 {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
._1owwggq5 {
  margin-bottom: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 500;
  color: var(--affine-v2-text-secondary);
}
._1owwggq6 {
  position: absolute;
  top: 0;
  left: 0;
}
._1owwggq7 {
  width: 100%;
  height: 180px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._1owwggq8 {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  background-color: var(--affine-v2-layer-background-hoverOverlay);
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 1;
  height: 24px;
}
._1owwggq9 {
  position: relative;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}
._1owwggqa {
  box-shadow: none;
  background-color: var(--affine-v2-layer-background-tertiary);
}
._1owwggqb {
  display: flex;
  align-items: center;
  padding: 4px;
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
}
._1owwggqc {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: var(--affine-font-sm);
  font-family: inherit;
  color: inherit;
  background-color: transparent;
}
._1owwggqc::-moz-placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1owwggqc::placeholder {
  color: var(--affine-v2-text-placeholder);
}
._1owwggqd {
  color: var(--affine-v2-icon-primary);
  font-size: 20px;
}
._1owwggqe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
._1owwggqf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._1owwggqg {
  display: inline-flex;
  align-items: center;
  color: var(--affine-v2-text-primary);
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--affine-font-sm);
  line-height: normal;
  height: 22px;
}
._1owwggqg.secondary {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
  height: 20px;
}
._1owwggqh {
  color: var(--affine-v2-button-primary);
  margin-left: 8px;
}
._1owwggqi {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
  padding: 4px;
}
._1owwggqj {
  color: var(--affine-v2-toast-iconState-error);
}
._1owwggqk {
  color: var(--affine-v2-text-link);
  font-size: inherit;
}
._1owwggql {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 250px;
}
._1owwggqm {
  flex: 1;
}
._1owwggqn {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-secondary);
  min-width: 40px;
  text-align: right;
}
._1b2r17q0 {
  height: 100px;
  display: flex;
  justify-content: center;
}
.tgrgew0 {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tgrgew1 {
  font-size: var(--affine-font-h-4);
  font-weight: 600;
  margin-bottom: 48px;
}
.tgrgew2 {
  margin-bottom: 68px;
}
.tgrgew3 {
  background-color: var(--affine-background-tertiary-color);
  font-size: var(--affine-font-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
}
.tgrgew4 {
  color: var(--affine-error-color);
  font-weight: 600;
}
.tgrgew5 {
  flex-grow: 1;
  min-height: 12px;
}
.tgrgew6 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  gap: 4px;
}
.tgrgew7 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tgrgew8 {
  display: flex;
  justify-content: center;
}
.tgrgew9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.tgrgewa {
  font-weight: 600;
  color: var(--affine-text-secondary-color);
  margin-bottom: 8px;
}
.tgrgewb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tgrgewc {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}
.tgrgewd {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  gap: 8px;
}
.tgrgewe {
  margin-left: auto;
  margin-right: 0;
}
.hktxcd0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hktxcd1 {
  color: var(--affine-v2-text-link);
  cursor: pointer;
  margin-left: 4px;
}
.hktxcd2 {
  color: var(--affine-v2-button-error);
}
.hktxcd3 {
  color: var(--affine-v2-text-link);
}
.c9cwnn0 {
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
}
.c9cwnn1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c9cwnn2 {
  display: flex;
  font-size: var(--affine-font-h-4);
  font-weight: 600;
  line-height: 30px;
  white-space: pre-wrap;
  position: relative;
}
.c9cwnn3 {
  display: inline-flex;
  font-size: var(--affine-font-base);
  font-weight: 400;
  line-height: 24px;
  white-space: pre-wrap;
  color: var(--affine-v2-text-secondary);
}
.c9cwnn4 {
  font-size: var(--affine-font-xs);
  background: var(--affine-v2-chip-label-blue);
  padding: 0 8px;
  border-radius: 4px;
  position: absolute;
  right: 32px;
  top: 0;
}
.c9cwnn5 {
  display: flex;
  align-items: center;
  height: 100px;
  margin: 20px 0;
}
.c9cwnn6 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.c9cwnn7 {
  font-size: var(--affine-font-sm);
  line-height: 24px;
  white-space: pre-wrap;
}
.c9cwnn7 strong {
  font-weight: 600;
}
.c9cwnn7 ul {
  padding: 12px 0;
  margin-left: 15px;
}
.c9cwnn7 li {
  list-style-type: disc;
  padding: 6px 0;
}
.c9cwnn7 li::marker {
  color: var(--affine-v2-block-list-header);
}
.c9cwnn8 {
  font-size: var(--affine-font-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.c9cwnn9 {
  width: 16px;
  height: 16px;
  color: var(--affine-v2-icon-primary);
}
.c9cwnna {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
}
.c9cwnnb {
  margin-top: auto;
  align-self: center;
}
.c9cwnna strong {
  font-weight: 700;
}
._1sjh87w0 {
  color: var(--affine-error-color);
}
._16vf0q20 {
  border: 1px solid var(--affine-border-color);
  border-radius: 16px;
  padding: 36px;
}
._16vf0q21 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
._16vf0q22 {
  font-weight: 500;
  font-size: var(--affine-font-xs);
  line-height: 20px;
  color: var(--affine-brand-color);
}
._16vf0q23 {
  font-weight: 500;
  font-size: var(--affine-font-sm);
  line-height: 22px;
  color: var(--affine-text-primary-color);
}
._16vf0q24 {
  color: var(--affine-text-primary-color);
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
}
._16vf0q25 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
  margin-bottom: 24px;
}
._16vf0q26 {
  display: flex;
  gap: 12px;
}
._16vf0q27 {
  min-width: 160px;
  height: 37px;
  border-radius: 18px;
  font-weight: 500;
  font-size: var(--affine-font-sm);
  line-height: 14px;
  letter-spacing: -1%;
}
._16vf0q28 {
  color: var(--affine-text-emphasis-color);
  padding-left: 16px;
  padding-right: 16px;
}
._16vf0q29 {
  font-size: var(--affine-font-xs);
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._16vf0q29 > a {
  color: var(--affine-text-primary-color);
  text-decoration: underline;
}
._16vf0q2a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._16vf0q2b {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._16vf0q2c {
  font-weight: 500;
  font-size: var(--affine-font-sm);
  line-height: 20px;
  color: var(--affine-text-primary-color);
  display: flex;
  align-items: center;
  gap: 4px;
}
._16vf0q2c > svg {
  color: var(--affine-brand-color);
  width: 20px;
  height: 20px;
}
._16vf0q2d {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._16vf0q2e {
  font-weight: 400;
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  line-height: 24px;
  padding-left: 22px;
  position: relative;
}
._16vf0q2e::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  position: absolute;
  left: 10px;
  top: 10px;
}
@keyframes vbbuyt7 {
  from {
    margin-bottom: -100px;
  }
  to {
    margin-bottom: 0;
  }
}
.vbbuyt0 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vbbuyt1 {
  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;
}
.vbbuyt2 {
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  height: 9px;
  width: 100%;
}
.vbbuyt3 {
  --radix-scroll-area-thumb-height: 4px;
  background: var(--affine-icon-secondary);
  opacity: 0.6;
  overflow: hidden;
  height: 4px;
  border-radius: 4px;
}
.vbbuyt4 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--affine-link-color);
  background: transparent;
  border-color: transparent;
  font-size: var(--affine-font-xs);
}
.vbbuyt5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.vbbuyt6 {
  opacity: 0;
}
[data-cloud-visible] .vbbuyt6 {
  opacity: 1;
}
.vbbuyt8 {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  width: var(--setting-modal-content-width);
  background: var(--affine-white);
  border-radius: 8px;
  border: 1px solid var(--affine-border-color);
  transition: transform 0.36s ease 0.4s, opacity 0.3s ease 0.46s;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 12px 16px;
  box-shadow: var(--affine-shadow-1);
  margin-bottom: -100px;
  animation: vbbuyt7 0.3s ease 0.5s forwards;
}
[data-cloud-visible] .vbbuyt8 {
  transform: translateY(100px);
  opacity: 0;
}
div.vbbuyt8 {
  display: flex !important;
}
.vbbuyt9 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  line-height: 22px;
  color: var(--affine-text-primary-color);
}
.vbbuyta {
  font-size: var(--affine-font-xs);
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-text-secondary-color);
}
._1yrszr80 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-text-secondary-color);
  margin-bottom: 8px;
}
._1yrszr81 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--affine-text-primary-color);
  margin-bottom: 4px;
}
._1yrszr82 {
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  color: var(--affine-brand-color);
  margin-bottom: 24px;
}
._1yrszr83 {
  width: auto;
  height: 36px;
  margin-bottom: 8px;
  padding: 8px 18px;
}
._1yrszr84 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 16px;
  max-width: 324px;
}
._1yrszr85 {
  color: inherit;
  cursor: text;
}
.ylz58a0 {
  display: flex;
  gap: 16px;
}
.ylz58a1 {
  width: 258px;
  height: 426px;
  flex-shrink: 0;
  border-radius: 16px;
  background-color: var(--affine-background-primary-color);
  border: 1px solid var(--affine-border-color);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ylz58a2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ylz58a3 {
  flex-grow: 1;
  height: 0;
}
._17eiaxz0 {
  height: 32px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--affine-font-base);
}
._17eiaxz0:last-of-type {
  margin-bottom: 0;
}
._17eiaxz1 {
  display: flex;
}
._17eiaxz2 {
  min-width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--affine-background-tertiary-color);
  font-size: var(--affine-font-xs);
}
._17eiaxz2:not(:last-of-type) {
  margin-right: 2px;
}
._9oq3ry0 {
  margin-top: 24px;
}
._9oq3ry1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
._9oq3ry2 {
  width: 100%;
}
._9oq3ry3 {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
}
._9oq3ry4 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
._9oq3ry5 {
  display: flex;
  flex-direction: column;
  min-height: 72px;
  align-items: center;
  justify-content: center;
}
._9oq3ry6 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  border-radius: 8px;
}
._9oq3ry7 {
  flex: 1 0 0;
}
._9oq3ry8 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
}
._9oq3ry9 {
  font-size: var(--affine-font-base);
}
._9oq3rya {
  font-size: var(--affine-font-xs);
  font-weight: 500;
  color: var(--affine-v2-text-emphasis);
  cursor: pointer;
}
._9oq3ryb {
  margin-top: 8px;
}
._9oq3ryc {
  display: flex;
  align-items: center;
  gap: 16px;
}
._9oq3ryd {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  color: var(--affine-v2-text-primary);
  line-height: 22px;
}
._9oq3rye {
  display: flex;
  gap: 4px;
  color: var(--affine-v2-button-primary);
}
._9oq3rye.past-due {
  color: var(--affine-v2-button-error);
}
._9oq3ryf {
  font-size: var(--affine-font-xs);
  font-weight: 500;
}
._9oq3ryg {
  width: 14px;
  height: 14px;
}
.rm10300 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rm10301 {
  display: flex;
  flex-wrap: nowrap;
}
.rm10302 {
  background-color: var(--affine-v2-icon-activated);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 4px;
  margin-right: 12px;
}
.rm10303 {
  padding-left: 0;
}
.rm10304 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm10305 {
  color: var(--affine-v2-status-error);
  font-size: 24px;
}
._17spnbp0 {
  height: 100%;
  padding: 40px 15px 20px 15px;
  display: flex;
}
._17spnbp1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
}
._17spnbp2 {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
  min-height: calc(var(--setting-modal-height) - 124px);
  max-width: 560px;
}
._17spnbp3 {
  font-size: var(--affine-font-sm);
  color: var(--affine-text-primary-color);
  display: flex;
  align-items: start;
  line-height: 22px;
  gap: 12px;
}
._17spnbp4 {
  color: var(--affine-icon-color);
  margin-right: 12px;
  display: flex;
  margin: 3px 0;
}
._17spnbp5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  gap: 4px;
  font-size: var(--affine-font-xs);
  flex-wrap: wrap;
  max-width: 560px;
}
._17spnbp6 {
  color: var(--affine-link-color);
  cursor: pointer;
}
._17spnbp7 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.jczezm0 {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.jczezm1 {
  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;
}
.jczezm2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--affine-v2-layer-background-primary);
  transform: translateX(100%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.jczezm3 {
  padding-top: 16px;
}
.jczezm4 {
  padding: 12px 0px 8px 16px;
  flex-shrink: 0;
}
.jczezm5 {
  height: 0 !important;
  flex: 1;
}
.jczezm6 {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}
._1t8td200 {
  width: 0;
  flex-grow: 1;
}
._1t8td201 {
  height: 0;
  flex-grow: 1;
}
._1t8td202 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
}
.iwu4zm0 {
  padding: 8px 12px 12px 12px;
  border-radius: 8px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  height: 150px;
  display: flex;
  flex-direction: column;
  background: var(--affine-v2-layer-background-overlayPanel);
  cursor: pointer;
  color: unset;
}
.iwu4zm0:visited {
  color: unset;
}
.iwu4zm1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-bottom: 4px;
}
.iwu4zm2 {
  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(--affine-v2-layer-insideBorder-border);
  font-size: 24px;
  padding: 4px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--affine-v2-icon-monotone);
}
.iwu4zm3 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.iwu4zm4 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
.iwu4zm5 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
.iwu4zm6 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
.iwu4zm7 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.iwu4zm7:not(:empty) {
  margin-top: 8px;
  height: 28px;
}
.yde63d0 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.yde63d0[data-divider="true"] {
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
}
.yde63d1 {
  width: 0;
  flex: 1;
}
.yde63d2 {
  width: 40px;
  height: 40px;
  font-size: 30px;
  border-radius: 5px;
}
.yde63d3 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.yde63d4 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
.yde63d5 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.yde63d5[data-has-desc="false"] {
  padding: 5px 0;
}
.yde63d6 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.yde63d7 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
  margin-top: 2px;
}
.yde63d8 {
  border-radius: 4px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.yde63d9 {
  padding: 8px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.yde63d9:last-child {
  border-bottom: none;
}
.yde63da {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--affine-v2-text-primary);
}
.yde63db {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
.yde63dc {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: var(--affine-v2-icon-activated);
  flex-shrink: 0;
}
.uedxum0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.uedxum1 {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background: var(--affine-v2-layer-background-primary);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.uedxum2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.uedxum3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
}
.uedxum4 {
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
}
.uedxum5 {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  white-space: nowrap;
}
.uedxum6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uedxum7 {
  font-size: 12px;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  padding: 8px 0;
}
.uedxum8 {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.s26b0z0 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.s26b0z0:hover {
  background: var(--affine-v2-layer-background-secondary);
}
.s26b0z1 {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.s26b0z2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s26b0z3 {
  font-size: 14px;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
}
.s26b0z4 {
  font-size: 12px;
  line-height: 18px;
  color: var(--affine-v2-text-secondary);
}
.mvp2rt0 {
  width: 100%;
  margin-top: 24px;
}
.mvp2rt1 {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--affine-border-color);
  border-radius: 8px;
  padding: 8px 16px;
  gap: 0px;
  margin-bottom: 16px;
}
.mvp2rt2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mvp2rt3 {
  background-color: var(--affine-v2-layer-background-secondary);
  padding: 16px 16px;
  border-radius: 8px;
  margin: 8px 0;
  font-family: var(--affine-font-mono-family);
  overflow-x: auto;
}
.mvp2rt4 {
  font-size: 13px;
  line-height: 22px;
  color: var(--affine-v2-text-secondary);
}
.mvp2rt5 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--affine-v2-text-primary);
}
._15c3al61 {
  width: 480px;
  max-width: calc(100vw - 32px);
}
._15c3al62 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 8px;
}
._15c3al63 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 16px;
}
._15c3al64 {
  height: 28px;
  border-radius: 4px;
}
._15c3al65 {
  font-size: 10px;
  color: var(--affine-v2-status-error);
  line-height: 16px;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.23s ease;
}
._15c3al65[data-show="true"] {
  padding-top: 4px;
  height: 20px;
}
._15c3al66 {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 20px;
}
._15c3al67 {
  color: var(--affine-v2-text-link);
}
.pp6zga0 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp6zga1 {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pp6zga2 {
  width: 480px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
}
.pp6zga3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.24px;
  color: var(--affine-v2-text-primary);
  margin-bottom: 12px;
}
.pp6zga4 {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  height: 0;
  flex-grow: 1;
  margin-bottom: 20px;
}
._10h5q550 {
  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;
}
._10h5q550.select {
  height: 65vh;
  max-height: 508px;
  min-height: min(508px, calc(100vh - 32px));
}
._10h5q550.writing {
  height: 65vh;
  max-height: 194px;
  min-height: min(194px, calc(100vh - 32px));
}
._10h5q551 {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  margin-bottom: 2px;
}
._10h5q552 {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  margin-bottom: 16px;
}
._10h5q553 {
  color: var(--affine-v2-button-primary);
  font-weight: 500;
}
._10h5q554 {
  height: 0;
  flex-grow: 1;
}
._10h5q555 {
  height: 0;
  flex-grow: 1;
  text-align: center;
  padding-top: 48px;
  color: var(--affine-v2-text-secondary);
  font-size: 14px;
  line-height: 22px;
}
._10h5q556 {
  width: calc(100% + 48px);
  margin: 8px -24px;
}
._10h5q557 {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
  padding-top: 20px;
}
._10h5q558 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--affine-v2-text-secondary);
  font-size: 14px;
  line-height: 22px;
}
._10h5q559 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
._10h5q55a {
  height: 0;
  flex-grow: 1;
}
._10h5q55b {
  display: flex;
  padding: 6px 0;
  align-items: center;
}
._10h5q55e {
  font-size: 14px;
  line-height: 22px;
}
._10h5q55c ._10h5q55e {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-secondary);
  white-space: nowrap;
}
._10h5q55f {
  color: var(--affine-v2-icon-primary);
  width: 20px;
  margin-right: 8px;
  font-size: 20px !important;
  line-height: 0px !important;
}
._10h5q55g {
  width: 0;
  flex-grow: 32;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--affine-v2-text-link);
}
._10h5q55h {
  color: var(--affine-v2-text-link);
}
._10h5q55i {
  font-size: 12px;
  line-height: 20px;
  width: 64px;
  margin-left: 12px;
  margin-right: 12px;
}
._10h5q55j {
  color: var(--affine-v2-button-success);
}
._10h5q55k {
  color: var(--affine-v2-text-tertiary);
}
._10h5q55l {
  color: var(--affine-v2-text-primary);
}
._10h5q55m {
  width: 0;
  flex-grow: 29;
  white-space: nowrap;
  font-size: 12px;
  color: var(--affine-v2-text-secondary);
}
._10h5q55n {
  display: flex;
  align-items: center;
  gap: 8px;
}
._10h5q55o {
  line-height: 0;
}
._10h5q55p {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.24px;
  color: var(--affine-v2-text-primary);
}
._10h5q55q {
  height: 0;
  flex-grow: 1;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  color: var(--affine-v2-text-primary);
  padding-top: 12px;
}
._10h5q55r {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
}
._1dhmrtd0 {
  width: 480px;
  max-width: calc(100vw - 32px);
}
._1dhmrtd1 {
  width: 100%;
  color: var(--affine-v2-text-secondary);
}
._1dhmrtd2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
._1dhmrtd3 {
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: stretch;
}
._1dhmrtd3::before {
  content: "";
  width: 100%;
  height: 0;
  border-bottom: 0.5px solid var(--affine-v2-layer-insideBorder-border);
  flex-grow: 1;
}
._1dhmrtd4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--affine-v2-text-primary);
  margin-bottom: 8px;
}
._1dhmrtd5 {
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s cubic-bezier(.07,.83,.46,1), opacity 0.4s ease;
}
._1dhmrtd5[data-collapsed="true"] {
  grid-template-rows: 0fr;
  opacity: 0;
}
._1dhmrtd6 {
  overflow: hidden;
}
._1dhmrtd7 {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--affine-v2-text-primary);
  margin-bottom: 2px;
}
._1dhmrtd8 {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  font-size: 14px;
}
._1dhmrtd9 {
  font-size: 14px;
  line-height: 22px;
  color: var(--affine-v2-text-placeholder);
}
._1dhmrtda {
  left: -1px;
  top: calc(-1px + var(--radix-popper-anchor-height) * -1);
  width: calc(2px + var(--radix-popper-anchor-width));
}
.m3ruou0 {
  margin-top: 24px;
}
.m3ruou1 {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background-color: var(--affine-v2-layer-white);
  border-radius: 8px;
}
.m3ruou2 {
  display: flex;
  justify-content: space-between;
}
.m3ruou3 {
  flex: 1 0 0;
}
.m3ruou4 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  display: flex;
  gap: 4px;
  margin: 0px 4px;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.m3ruou4.hidden {
  visibility: hidden;
}
.m3ruou5 {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.m3ruou5.left {
  justify-content: flex-start;
}
.m3ruou6 {
  margin-top: 8px;
}
.m3ruou7 {
  margin-top: 8px;
  margin-right: 9px;
}
.m3ruou8 {
  font-size: var(--affine-font-xs);
  font-weight: 400;
}
.m3ruou9 {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 20px;
}
.m3ruoua {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
}
.m3ruoub {
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  padding-top: 20px;
  justify-content: space-between;
}
.m3ruouc {
  display: flex;
  gap: 20px;
}
._1lwkcnx0 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
._1lwkcnx1 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
  border-radius: 8px;
  background-color: var(--affine-v2-layer-background-tertiary);
}
._1lwkcnx2 {
  font-weight: 500;
}
._1lwkcnx3 {
  font-size: var(--affine-font-sm);
}
._1lwkcnx4 {
  color: var(--affine-v2-text-link);
}
._1lwkcnx4:visited {
  color: var(--affine-v2-text-link);
}
._1lwkcnx5 {
  display: flex;
  justify-content: space-between;
  font-size: var(--affine-font-xs);
  align-items: center;
}
._1lwkcnx6 {
  font-weight: 500;
}
._1lwkcnx7 {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  width: 100%;
  max-width: 300px;
}
._1lwkcnx8 {
  display: flex;
  align-items: center;
  gap: 4px;
}
._1lwkcnx9 {
  font-size: var(--affine-font-xs);
  padding: 0 4px;
  color: var(--affine-v2-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  flex: 1;
}
._1lwkcnxa {
  width: 16px;
  height: 16px;
  color: var(--affine-v2-icon-primary);
}
._1lwkcnxb {
  width: 100%;
}
._1lwkcnxc {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
._1lwkcnxd {
  width: 16px;
  height: 16px;
  color: var(--affine-v2-layer-pureWhite);
}
._1lwkcnxe {
  display: flex;
  font-size: var(--affine-font-sm);
  font-weight: 400;
  color: var(--affine-v2-text-secondary);
}
@media screen and (max-width: 768px) {
  ._1lwkcnx5 {
    flex-wrap: wrap;
  }
}
._1hkku660 {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background-color: var(--affine-v2-layer-white);
  border-radius: 8px;
  gap: 18px;
  margin-bottom: 24px;
}
._1hkku661 {
  display: flex;
  padding: 0px 6px;
  gap: 4px;
  flex-direction: column;
  font-size: var(--affine-font-base);
}
._1hkku662 {
  font-weight: 600;
  line-height: 24px;
}
._1hkku663 {
  color: var(--affine-v2-text-secondary);
  font-weight: 400;
  line-height: 24px;
}
._1hkku664 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-auto-rows: min-content;
}
._1hkku665 {
  display: flex;
  gap: 8px;
  font-size: var(--affine-font-xs);
}
._1hkku666 {
  color: var(--affine-v2-button-primary);
  width: 20px;
  height: 20px;
}
._1hkku667 {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  ._1hkku664 {
    grid-template-columns: 1fr;
  }
}
._8nq70d0 {
  font-weight: 600;
  font-size: var(--affine-font-h-6);
  margin-bottom: 20px;
}
._8nq70d1 {
  margin-bottom: 10px;
}
._8nq70d2 {
  display: flex;
  justify-content: flex-end;
}
._8nq70d3 {
  color: var(--affine-v2-text-primary);
  font-weight: 600;
}
._8nq70d4 {
  vertical-align: sub;
  display: inline-block;
}
._8nq70d5 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
._8nq70d6 {
  line-height: 1.5;
}
._8nq70d7 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
._8nq70d8 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
._8nq70d9 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
._8nq70da {
  font-size: var(--affine-font-sm);
  font-weight: 500;
}
._8nq70db {
  display: flex;
  align-items: center;
  gap: 4px;
}
._8nq70dc {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
._8nq70dd {
  color: var(--affine-v2-status-error);
  font-size: var(--affine-font-xs);
}
._8nq70de {
  padding: 4px 8px;
}
.q1chcu0 {
  font-weight: 600;
  font-size: var(--affine-font-h-6);
  margin-bottom: 20px;
}
.q1chcu1 {
  margin-bottom: 10px;
}
.q1chcu2 {
  display: flex;
  justify-content: flex-end;
}
.q1chcu3 {
  margin-left: 4px;
  margin-right: 10px;
  color: var(--affine-v2-text-primary);
}
.q1chcu4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.q1chcu5 {
  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;
}
.q1chcu5:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
}
.q1chcu5.active {
  color: var(--affine-v2-text-emphasis);
  cursor: default;
  pointer-events: none;
}
.q1chcu5.label {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
.q1chcu5.disabled {
  opacity: .4;
  cursor: default;
  color: var(--affine-v2-text-disable);
  pointer-events: none;
}
.q1chcu5 a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.q1chcu6 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.q1chcu7 {
  font-size: var(--affine-font-sm);
  font-weight: 500;
}
.q1chcu8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q1chcu9 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.q1chcua {
  color: var(--affine-v2-icon-primary);
  font-size: 16px;
}
.q1chcub {
  color: var(--affine-v2-status-error);
  font-size: var(--affine-font-xs);
}
.q1chcuc {
  padding-left: 0;
  padding-right: 0;
  overflow-y: visible;
}
.q1chcud {
  display: flex;
  gap: 8px;
}
.q1chcue {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
}
.uaa4fp0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.uaa4fp1 {
  display: flex;
  flex-direction: row;
  align-items: start;
  font-size: var(--affine-font-base);
}
.uaa4fp2 {
  background: var(--affine-v2-icon-activated);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 10px;
}
._1oiyur40 {
  position: relative;
  opacity: 0.4;
  margin-top: 24px;
}
._1oiyur40::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: not-allowed;
}
._1oiyur41 {
  padding: 4px;
  border-radius: 12px;
  background: var(--affine-v2-layer-background-primary);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
._1oiyur42 {
  gap: 24px;
  display: flex;
  flex-direction: column;
}
._1oiyur43 {
  display: inline-flex;
  align-items: center;
}
._1oiyur44 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-emphasis);
  cursor: pointer;
  margin-left: 4px;
  display: inline;
}
._1oiyur45 {
  color: var(--affine-v2-status-error);
}
._1oiyur46 {
  display: flex;
  justify-content: center;
  align-items: flexStart;
  color: var(--affine-v2-text-secondary);
  gap: 4px;
  padding: 8px;
  font-size: var(--affine-font-xs);
}
._1oiyur47 {
  padding: 0 4px 0 16px;
  height: 58px;
  display: flex;
  width: 100%;
  align-items: center;
}
._1oiyur47:hover {
  background: var(--affine-v2-layer-background-hoverOverlay);
  border-radius: 8px;
}
._1oiyur47:not(:last-of-type) {
  margin-bottom: 6px;
}
._1oiyur48 {
  width: 250px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 20px;
}
._1oiyur49 {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--affine-font-sm);
}
._1oiyur49.pending {
  color: var(--affine-v2-text-emphasis);
}
._1oiyur49.error {
  color: var(--affine-v2-status-error);
}
._1oiyur4a {
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}
._1oiyur4b {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
._1oiyur4c {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
._1oiyur4d {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
._1oiyur4e {
  display: flex;
}
._1oiyur4f {
  background: var(--affine-v2-icon-activated);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 10px;
}
._1oiyur4g {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 20px;
}
._1oiyur4h {
  padding: 4px 8px;
}
.uaj7jr0 {
  position: relative;
  padding: 0px;
  width: 560px;
  background: var(--affine-background-overlay-panel-color);
  border-radius: 12px;
}
.uaj7jr1 {
  margin: 44px 0px 12px 0px;
  width: 560px;
  font-weight: 600;
  font-size: 20px;;
  text-align: center;
}
.uaj7jr2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 24px 0;
  font-size: var(--affine-font-base);
}
.uaj7jr3 {
  font-weight: 600;
}
._21hnlc0 {
  display: flex;
  align-items: flex-end;
  margin-top: 12px;
}
._21hnlc1 {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 24px;
  gap: 10px;
  flex-wrap: wrap;
}
._21hnlc2 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  margin-bottom: 5px;
}
._21hnlc3 {
  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: var(--affine-font-xs);
  color: var(--affine-v2-text-primary);
  line-height: 20px;
  white-space: nowrap;
}
._21hnlc4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._21hnlc5 {
  flex-grow: 1;
}
._21hnlc5 .storage-progress-desc {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
._21hnlc5 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--affine-v2-layer-background-hoverOverlay);
  overflow: hidden;
}
._21hnlc6 {
  height: 100%;
}
._1gcwv810 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._1gcwv812 {
  font-size: 14px;
  width: 0;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
._1gcwv813 {
  width: 250px;
}
._1rpx7hb0 {
  display: flex;
  flex-direction: column;
}
._1rpx7hb1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  gap: 8px;
  color: var(--affine-v2-text-secondary);
  border-radius: 6px;
  line-height: 22px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._1rpx7hb1 {
  cursor: pointer;
}
._1rpx7hb1:hover {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
._1rpx7hb1[data-drag-preview="true"] {
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
  background-color: transparent;
}
._1rpx7hb1[data-dragging="true"] {
  opacity: 0.5;
}
._1rpx7hb1[draggable="true"]:before {
  content: "";
  display: block;
  position: absolute;
  cursor: grab;
  top: 50%;
  left: 0;
  border-radius: 2px;
  background-color: var(--affine-v2-text-placeholder);
  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;
}
._1rpx7hb1[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;
}
._1rpx7hb1[draggable="true"]:hover:before {
  height: 12px;
  opacity: 1;
}
._1rpx7hb2 {
  font-size: 16px;
}
._1rpx7hb3 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--affine-font-sm);
  color: var(--affine-v2-text-primary);
}
._1rpx7hb4 {
  font-size: var(--affine-font-xs);
}
._1rpx7hb5 {
  color: var(--affine-v2-text-secondary);
}
.kj5wj60 {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
}
.kj5wj61 {
  display: flex;
  flex-direction: row;
  justify-items: flex-end;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 16px;
}
.kj5wj62 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
  gap: 6px;
  outline: none;
  transition: background 0.2s ease;
}
.kj5wj62[data-highlight] {
  background: var(--affine-background-secondary-color);
}
.kj5wj63 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.kj5wj64 {
  color: var(--affine-icon-color);
  font-size: 16px;
}
.kj5wj65 {
  color: var(--affine-text-primary-color);
  font-size: var(--affine-font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kj5wj65[data-unnamed=true] {
  color: var(--affine-placeholder-color);
}
.kj5wj66 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-sm);
  white-space: nowrap;
}
.kj5wj67 {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--affine-border-color);
}
.kj5wj68 {
  flex-grow: 1;
}
.kj5wj69 {
  color: var(--affine-text-disable-color);
  font-size: var(--affine-font-xs);
}
.kj5wj6a {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-sm);
  margin-bottom: 8px;
}
.kj5wj6b {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: var(--affine-font-sm);
  font-weight: 500;
  color: var(--affine-text-secondary-color);
  padding: 8px 16px;
  min-width: 260px;
}
.kj5wj6c {
  font-size: var(--affine-font-h-5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--affine-border-color);
  background: var(--affine-background-secondary-color);
}
.mls5b10 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mls5b11 {
  flex-grow: 1;
}
.mls5b11 .storage-progress-desc {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.mls5b11 .storage-progress-bar-wrapper {
  height: 8px;
  border-radius: 4px;
  background-color: var(--affine-v2-layer-background-hoverOverlay);
  overflow: hidden;
}
.mls5b12 {
  height: 100%;
}
.mls5b13 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mls5b14 {
  flex-grow: 1;
}
.mls5b15 {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  height: 28px;
}
.mls5b16 {
  color: var(--affine-v2-text-secondary);
}
.mls5b17 {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--affine-v2-layer-background-primary);
  border: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.mls5b18 {
  display: grid;
  grid-template-columns: repeat(3, minmax(30%, 1fr));
  gap: 12px;
}
.mls5b19 {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mls5b1a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 320px;
}
.mls5b1b {
  padding-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-sm);
}
.mls5b1c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mls5b1d {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 4px;
  padding: 6px;
  background-color: var(--affine-v2-layer-background-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
}
.mls5b19[data-selected="true"] .mls5b1d {
  border-color: var(--affine-v2-button-primary);
}
.mls5b19:hover .mls5b1d {
  background-color: var(--affine-v2-layer-background-hoverOverlay);
}
.mls5b1e {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  opacity: 0;
}
.mls5b19:hover .mls5b1e {
  opacity: 1;
}
.mls5b19[data-selected="true"] .mls5b1e {
  opacity: 1;
}
.mls5b1e path {
  background-color: var(--affine-v2-layer-background-primary);
}
.mls5b1f {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mls5b1h {
  font-size: var(--affine-font-xs);
  width: 100%;
}
.mls5b1i {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mls5b1j {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-secondary);
}
._13cen4k0 {
  width: 25%;
  max-width: 242px;
  background: var(--affine-background-secondary-color);
  padding: 20px 0px 0px 12px;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
._13cen4k1 {
  font-size: var(--affine-font-h-6);
  font-weight: 600;
  line-height: var(--affine-line-height);
  padding: 0 8px;
}
._13cen4k2 {
  font-size: var(--affine-font-sm);
  line-height: var(--affine-line-height);
  color: var(--affine-text-secondary-color);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._13cen4k3 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
._13cen4k4 {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  height: 30px;
  flex-shrink: 0;
  font-size: var(--affine-font-sm);
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._13cen4k4:hover {
  background: var(--affine-hover-color);
}
._13cen4k4.active {
  background: var(--affine-hover-color);
}
._13cen4k5 {
  display: flex;
  align-items: center;
  margin: 0px 16px;
  padding: 0px 8px 0px 32px;
  height: 30px;
  flex-shrink: 0;
  font-size: var(--affine-font-sm);
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--affine-text-secondary-color);
}
._13cen4k5.active, ._13cen4k5:hover {
  color: var(--affine-text-primary-color);
}
._13cen4k6 {
  width: 16px;
  height: 16px;
  font-size: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  color: var(--affine-v2-icon-primary);
  display: inline-flex;
}
._13cen4k7 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
}
._13cen4k8 {
  font-size: var(--affine-font-xs);
  color: var(--affine-v2-text-primary);
  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);
}
._13cen4k9 {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
._13cen4k9::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--affine-blue);
}
._13cen4ka {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 12px;
}
._13cen4kb {
  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;
}
._13cen4kb:hover {
  background: var(--affine-hover-color);
}
._13cen4kb.active {
  background: var(--affine-hover-color);
}
._13cen4kb .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
._13cen4kb .avatar.not-sign {
  color: var(--affine-icon-secondary);
  background: var(--affine-white);
  padding-bottom: 2px;
  border: 1px solid var(--affine-icon-secondary);
}
._13cen4kb .content {
  flex-grow: 1;
  min-width: 0;
}
._13cen4kb .name-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 4px;
  height: 22px;
}
._13cen4kb .name {
  font-size: var(--affine-font-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px;
}
._13cen4kb .email {
  font-size: var(--affine-font-xs);
  color: var(--affine-text-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  height: 20px;
}
.p1amr0 {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  line-height: 20px;
}
.p1amr0 a {
  color: var(--affine-link-color);
}
.p1amr0 .link {
  cursor: pointer;
  color: var(--affine-link-color);
}
.p1amr1 {
  margin: auto;
  margin-bottom: 4px;
  text-align: center;
}
.p1amr2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.p1amr3 {
  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;
}
.p1amr4 {
  color: var(--affine-v2-text-link);
}
.p1amr5 {
  color: var(--affine-v2-text-link);
}
.p1amr6 {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 20px;
}
.p1amr7 {
  flex: 1;
  height: 0;
  border-bottom: 1px solid var(--affine-v2-layer-insideBorder-border);
}
.p1amr8 {
  color: var(--affine-v2-text-secondary);
  font-size: var(--affine-font-xs);
}
.p1amr9 {
  color: var(--affine-v2-text-primary);
  font-size: var(--affine-font-xs);
  font-weight: 500;
}
.p1amra {
  color: var(--affine-v2-text-link);
  font-size: var(--affine-font-xs);
}
.p1amrb {
  color: var(--affine-v2-text-link);
}
.p1amrc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p1amrd {
  background-color: var(--affine-v2-button-signinbutton-background);
}
.p1amre {
  background-color: var(--affine-v2-button-signinbutton-background);
}
@keyframes pzn4re1 {
  from {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes pzn4re2 {
  to {
    opacity: 0;
    transform: translateY(-2%) scale(0.96);
  }
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.pzn4re3 {
  position: fixed;
  right: 28px;
  top: 80px;
  z-index: var(--affine-z-index-modal);
}
.pzn4re4 {
  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;
}
.pzn4re4[data-state=entered], .pzn4re4[data-state=entering] {
  animation: pzn4re1 var(--pzn4re0) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
.pzn4re4[data-state=exited], .pzn4re4[data-state=exiting] {
  animation: pzn4re2 var(--pzn4re0) cubic-bezier(0.42, 0, 0.58, 1);
  animation-fill-mode: forwards;
}
.pzn4re5 {
  display: flex;
  align-items: center;
  flex: 1;
}
.pzn4re6 {
  font-size: 20px;
  color: var(--affine-icon-color);
  vertical-align: middle;
}
.pzn4re7 {
  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);
}
.pzn4re7.active {
  border-color: var(--affine-primary-color);
}
.pzn4re8 {
  display: flex;
  align-items: center;
  flex: 1;
  height: 32px;
  position: relative;
}
.pzn4re9 {
  position: absolute;
  padding: 0;
  inset: 0;
  height: 100%;
  width: 100%;
  color: transparent;
  font-size: 15px;
}
.pzn4rea {
  pointer-events: none;
}
.pzn4rea::-moz-placeholder {
  color: var(--affine-text-primary-color);
}
.pzn4rea::placeholder {
  color: var(--affine-text-primary-color);
}
.pzn4reb {
  color: var(--affine-text-secondary-color);
  font-size: var(--affine-font-xs);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pzn4rec {
  border: 1px solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.pzn4red {
  width: 32px;
  height: 32px;
  border-radius: 0;
}
.pzn4red:first-child {
  border-right: 1px solid;
  border-color: var(--affine-v2-layer-insideBorder-border);
}