@font-face {
  font-family: "geogeoVF";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-variation-settings: "wdth" 630;
  font-display: swap;
}

@font-face {
  font-family: "geogeoVF-ss04";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-feature-settings: "ss04" 1;
  font-variation-settings: "wdth" 630;
  font-display: swap;
}

@font-face {
  font-family: "geogeoVF-ss10";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-feature-settings: "ss10" 1;
  font-variation-settings: "wdth" 630;
  font-display: swap;
}

@font-face {
  font-family: "geogeoVF-ss11";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-feature-settings: "ss11" 1;
  font-variation-settings: "wdth" 630;
  font-display: swap;
}

@font-face {
  font-family: "geogeoVFTextBox";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-variation-settings: "wdth" 600;
  font-display: swap;
}

@font-face {
  font-family: "geogeoVFTextBox-ss02";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-feature-settings: "ss02" 1;
  font-variation-settings: "wdth" 600;
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Regular";
  src: url("./fonts/geogeoVF.ttf") format("truetype");
  font-weight: 250 700;
  font-variation-settings: "wdth" 630;
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Light";
  src: url("./fonts/geogeo-Light.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "geogeo-LightProportional";
  src: url("./fonts/geogeo-LightProportional.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Light-ss02";
  src: url("./fonts/geogeo-Light.otf") format("opentype");
  font-feature-settings: "ss02" 1;
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Medium";
  src: url("./fonts/geogeo-Medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Medium-ss02";
  src: url("./fonts/geogeo-Medium.otf") format("opentype");
  font-feature-settings: "ss02" 1;
  font-display: swap;
}

@font-face {
  font-family: "geogeo-Bold";
  src: url("./fonts/geogeo-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "geogeo-ProportionalRegular";
  src: url("./fonts/geogeo-ProportionalRegular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "geogeo-ProportionalRegular-ss02";
  src: url("./fonts/geogeo-ProportionalRegular.otf") format("opentype");
  font-feature-settings: "ss02" 1;
  font-display: swap;
}

:root {
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --ui-load-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-load-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tool-dot-count: 4;
  --tool-dot-size: 52px;
  --tool-dot-gap: 10px;
  --tool-dot-pad: 7px;
  --tool-dot-core-size: 12px;
  --tool-dot-hover-size: 15px;
  --tool-dot-active-size: 46px;
  --tool-dot-icon-size: 24px;
  --canvas-control-circle-size: var(--tool-dot-active-size);
  --tool-rail-height: calc(var(--tool-dot-size) + 2 * var(--tool-dot-pad));
  --tool-rail-width: calc(
    var(--tool-dot-count) * var(--tool-dot-size) +
    (var(--tool-dot-count) - 1) * var(--tool-dot-gap) +
    2 * var(--tool-dot-pad)
  );
  --tool-cluster-center-offset: calc(
    (var(--tool-dot-gap) + var(--tool-rail-height)) * 0.5
  );
  --top-tools-z-index: 130;
  --svg-tool-select-pointer: url("./assets/svg/ui/tools/select-pointer.svg");
  --svg-tool-select-text: url("./assets/svg/ui/tools/select-text.svg");
  --svg-tool-connect-grid: url("./assets/svg/ui/tools/connect-grid.svg");
  --svg-tool-connect-freehand: url("./assets/svg/ui/tools/connect-freehand.svg");
  --svg-tool-text-box: url("./assets/svg/ui/tools/text-box.svg");
  --svg-close-thin: url("./assets/svg/ui/actions/close-thin.svg");
  --svg-note-fullscreen-corners: url("./assets/svg/ui/note/fullscreen-corners.svg");
  --svg-add-image: url("./assets/svg/ui/add/image.svg");
  --svg-add-list: url("./assets/svg/ui/add/list.svg");
  --svg-add-pill: url("./assets/svg/ui/add/pill.svg");
  --svg-add-plus: url("./assets/svg/ui/add/plus.svg");
  --svg-add-text-box: url("./assets/svg/ui/add/text-box.svg");
  --svg-search-clear: url("./assets/svg/ui/search/clear.svg");
  --svg-search-magnifier: url("./assets/svg/ui/search/magnifier.svg");
  --svg-search-next: url("./assets/svg/ui/search/next.svg");
  --svg-search-prev: url("./assets/svg/ui/search/prev.svg");
  --svg-list-next: url("./assets/svg/ui/list/next.svg");
  --svg-line-end-arrow-default: url("./assets/svg/ui/line-end/arrow-default.svg");
  --svg-line-end-arrow-open: url("./assets/svg/ui/line-end/arrow-open.svg");
  --svg-line-end-arrow-slim: url("./assets/svg/ui/line-end/arrow-slim.svg");
  --svg-line-mode-bezier: url("./assets/svg/ui/line-mode/bezier.svg");
  --svg-line-mode-path: url("./assets/svg/ui/line-mode/path.svg");
  --svg-text-marker-corners: url("./assets/svg/ui/text-marker/corners.svg");
  --svg-text-marker-round-brackets: url("./assets/svg/ui/text-marker/round-brackets.svg");
  --svg-text-marker-angle-brackets: url("./assets/svg/ui/text-marker/angle-brackets.svg?v=20260602-1");
  --svg-text-scale-diagonal: url("./assets/svg/ui/text-scale/diagonal.svg");
  --svg-text-scale-cross: url("./assets/svg/ui/text-scale/cross.svg");
  --text-box-font-family: "geogeoVFTextBox-ss02", "geogeoVFTextBox", "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  --text-box-font-weight: 500;
  --text-box-font-variation-settings: "wdth" 600;
  --text-box-focus-font-family: "geogeoVFTextBox-ss02", "geogeoVFTextBox", "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  --text-box-focus-font-weight: 500;
  --text-box-focus-font-variation-settings: "wdth" 600;
  --ui-surface: color-mix(in srgb, var(--bg) 78%, var(--fg) 22%);
  --ui-active-surface: color-mix(in srgb, var(--bg) 94%, var(--fg) 6%);
  --ui-active-outline: color-mix(in srgb, var(--fg) 14%, transparent);
  --ui-picker-active-surface: color-mix(in srgb, var(--bg) 88%, var(--fg) 12%);
  --text-box-surface: var(--ui-surface);
  --glyph-panel-surface: var(--text-box-surface);
  --note-focus-surface: color-mix(in srgb, var(--bg) 88%, var(--fg) 12%);
  --note-focus-overlay: var(--bg);
  --note-focus-text: var(--fg);
  --note-focus-border: color-mix(in srgb, var(--fg) 13%, transparent);
  --note-focus-muted: color-mix(in srgb, var(--fg) 42%, transparent);
  --note-focus-letter-spacing: 0px;
  --text-box-focus-surface: var(--note-focus-surface);
  --text-box-focus-on-surface: var(--fg);
  --text-box-focus-field-bg: var(--bg);
  --text-box-focus-field-fg: var(--fg);
  --text-box-focus-muted: var(--note-focus-muted);
  --text-box-focus-accent: var(--connection);
  --text-box-focus-accent-border: color-mix(in srgb, var(--connection) 64%, transparent);
  --text-box-focus-overlay-bg: var(--note-focus-overlay);
  --text-box-focus-tab-bg: color-mix(in srgb, var(--bg) 44%, transparent);
  --text-box-focus-tab-fg: color-mix(in srgb, var(--fg) 34%, transparent);
  --text-box-focus-tab-border: color-mix(in srgb, var(--fg) 11%, transparent);
  --text-box-selection-bg: rgba(168, 168, 176, 0.26);
  --text-box-selection-fg: var(--fg);
  --text-box-caret-border: var(--cursor-border);
}

body.theme-light {
  --ui-surface: #f4f4f7;
  --ui-active-surface: #ffffff;
  --ui-active-outline: color-mix(in srgb, #000000 12%, transparent);
  --ui-picker-active-surface: #e6e6eb;
  --text-box-surface: #ffffff;
  --glyph-panel-surface: #f7f7fa;
  --note-focus-surface: color-mix(in srgb, #ffffff 88%, #000000 12%);
  --note-focus-overlay: var(--bg);
  --text-box-caret-border: rgba(0, 0, 0, 0.92);
}

body.theme-grey {
  --ui-surface: #ffffff;
  --ui-active-surface: #e0e0e6;
  --ui-active-outline: color-mix(in srgb, #000000 10%, transparent);
  --ui-picker-active-surface: #ececf0;
  --account-screen-chip-bg: var(--ui-surface);
  --account-screen-chip-bg-active: color-mix(in srgb, var(--ui-surface) 88%, var(--fg) 12%);
  --text-box-surface: #ffffff;
  --glyph-panel-surface: #ffffff;
  --note-focus-surface: color-mix(in srgb, #ffffff 88%, #000000 12%);
  --note-focus-overlay: var(--bg);
  --text-box-caret-border: rgba(0, 0, 0, 0.92);
}

body.theme-grey .minimap-button {
  background: var(--ui-surface);
  color: color-mix(in srgb, var(--fg) 66%, transparent);
}

body.theme-grey .account-panel:not(.expanded) .account-toggle {
  background: var(--ui-surface);
  color: color-mix(in srgb, var(--fg) 66%, transparent);
  opacity: 0.68;
}

body.theme-grey .account-panel:not(.expanded) .account-toggle:hover,
body.theme-grey .account-panel:not(.expanded) .account-toggle:focus-visible {
  background: var(--ui-surface);
  opacity: 0.98;
}

body.theme-grey .account-panel {
  --account-screen-chip-bg: var(--ui-surface);
  --account-screen-chip-bg-active: color-mix(in srgb, var(--ui-surface) 88%, var(--fg) 12%);
}

body.theme-dark {
  --ui-surface: #202024;
  --ui-active-surface: color-mix(in srgb, #202024 94%, #ffffff 6%);
  --ui-active-outline: color-mix(in srgb, #ffffff 12%, transparent);
  --ui-picker-active-surface: color-mix(in srgb, #202024 90%, #ffffff 10%);
  --text-box-surface: #2a2a2f;
  --glyph-panel-surface: #2a2a2f;
  --text-box-selection-bg: rgba(168, 168, 176, 0.26);
  --text-box-caret-border: rgba(255, 255, 255, 0.92);
}

body.theme-dim {
  --ui-surface: #343437;
  --ui-active-surface: color-mix(in srgb, #343437 94%, #ffffff 6%);
  --ui-active-outline: color-mix(in srgb, #ffffff 11%, transparent);
  --ui-picker-active-surface: color-mix(in srgb, #343437 90%, #ffffff 10%);
  --text-box-surface: #3f3f43;
  --glyph-panel-surface: #3f3f43;
  --text-box-selection-bg: rgba(168, 168, 176, 0.26);
  --text-box-caret-border: rgba(255, 255, 255, 0.92);
}

body.theme-blue {
  --ui-surface: #18233a;
  --ui-active-surface: color-mix(in srgb, #18233a 88%, #8bafff 12%);
  --ui-active-outline: color-mix(in srgb, #8bafff 20%, transparent);
  --ui-picker-active-surface: color-mix(in srgb, #18233a 82%, #8bafff 18%);
  --text-box-surface: #21304f;
  --glyph-panel-surface: #21304f;
  --note-focus-surface: color-mix(in srgb, #0d1627 82%, #8bafff 18%);
  --note-focus-overlay: #0d1627;
  --note-focus-text: var(--fg);
  --text-box-selection-bg: rgba(139, 175, 255, 0.36);
  --text-box-caret-border: rgba(139, 175, 255, 0.92);
  background: var(--bg);
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100lvh;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
  overscroll-behavior: none;
  font-variation-settings: "wdth" 630;
}

* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100lvh;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}

body.notes-page-exiting .app,
body.notes-page-exiting .drag-tool-dots,
body.notes-page-exiting .glyph-editor-launch-button,
body.notes-page-exiting .grid-element-picker,
body.notes-page-exiting .image-upload-button,
body.notes-page-exiting .minimap-button,
body.notes-page-exiting .minimap-panel,
body.notes-page-exiting .account-panel,
body.notes-page-exiting .voice-record-button,
body.notes-page-exiting .phone-keyboard-button,
body.notes-page-exiting .phone-stress-test-button {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 130ms ease, transform 150ms cubic-bezier(0.4, 0, 1, 1);
}

body.notes-page-exiting-to-editor .app {
  transition:
    opacity 240ms ease,
    transform 280ms cubic-bezier(0.4, 0, 1, 1);
}

.write-layer {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100lvh;
  pointer-events: auto;
  background: var(--bg);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
  --write-font-size: 13.5px;
  --grid-cell-width: 11px;
  --grid-cell-height: 18px;
  --write-cursor-border-width: 1.2px;
  --fullscreen-focus-zoom-duration: 640ms;
  --fullscreen-focus-zoom-x: 0px;
  --fullscreen-focus-zoom-y: 0px;
  --fullscreen-focus-zoom-scale: 1.86;
  transform: none;
  transform-origin: 0 0;
  opacity: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}

@keyframes notes-canvas-enter-from-editor {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.982);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

body.notes-page-entering-from-editor .write-layer {
  animation: notes-canvas-enter-from-editor 420ms var(--ui-load-ease) both;
  will-change: transform, opacity;
}

body.notes-page-exiting-to-editor .write-layer {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -12px, 0) scale(1.026);
  transition:
    transform 300ms var(--ui-load-ease),
    opacity 240ms ease;
  will-change: transform, opacity;
}

.account-panel {
  --account-screen-chip-bg: var(--ui-surface);
  --account-screen-chip-bg-active:
    color-mix(in srgb, var(--ui-surface) 88%, var(--fg) 12%);
  --account-screen-field-width: min(332px, calc(100vw - 120px));
  --account-screen-small-size: 13px;
  --account-screen-small-line-height: 1.08;
  --account-screen-display-family:
    "geogeoVFTextBox-ss02", "geogeoVFTextBox", "geogeoVF", "geogeo-Regular",
    "SF Mono", "Menlo", monospace;
  --account-screen-display-size: clamp(104px, 10vw, 188px);
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 31;
  display: grid;
  gap: 6px;
  width: max-content;
  max-width: min(292px, calc(100vw - 24px));
  padding: 2px 0;
  color: var(--fg);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 10px;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
  pointer-events: auto;
  transform-origin: 100% 100%;
  transition:
    opacity 130ms ease,
    transform 210ms var(--ui-load-ease-out),
    padding 190ms var(--ui-load-ease-out),
    background 170ms ease,
    border-radius 190ms var(--ui-load-ease-out);
}

.ui-loading .account-panel {
  opacity: 0;
  pointer-events: none;
}

.account-panel[hidden],
.account-panel [hidden] {
  display: none !important;
}

.account-toggle,
.account-action,
.account-input,
.account-project-select {
  border: 0;
  border-radius: 11px;
  font: inherit;
  letter-spacing: 0;
  caret-color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}

.account-input::selection,
.account-project-title::selection {
  background: var(--account-screen-chip-bg-active);
  color: var(--fg);
}

.account-toggle,
.account-action {
  min-height: 24px;
  padding: 0 9px;
  background: var(--account-screen-chip-bg);
  color: var(--fg);
  cursor: pointer;
  opacity: 0.56;
  transition:
    background 120ms ease,
    opacity 120ms ease,
    color 120ms ease;
}

.account-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.account-toggle::before,
.account-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: none;
}

.account-toggle::before {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow:
    -5px 0 0 currentColor,
    5px 0 0 currentColor;
  opacity: 0.8;
}

.account-toggle::after {
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.84);
  opacity: 0;
}

.account-toggle:hover,
.account-toggle:focus-visible,
.account-action:hover,
.account-action:focus-visible {
  background: var(--account-screen-chip-bg-active);
  opacity: 1;
  outline: none;
}

.account-toggle:hover::before,
.account-toggle:focus-visible::before,
.account-toggle:focus-visible::after {
  opacity: 1;
}

.account-panel:not(.expanded) .account-toggle:hover::after,
.account-panel:not(.expanded) .account-toggle:focus-visible::after {
  opacity: 0;
}

.ui-loading .account-toggle::before,
.ui-loading .account-toggle::after {
  transition: none;
}

.account-toggle[aria-expanded="true"]::before,
.account-toggle[aria-expanded="true"]::after {
  width: 10px;
  height: 1.5px;
  border-radius: 999px;
  box-shadow: none;
  opacity: 0.92;
}

.account-toggle[aria-expanded="true"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.account-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.account-panel.expanded {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "content toggle"
    "status status";
  align-items: start;
  column-gap: 6px;
  row-gap: 6px;
  width: min(292px, calc(100vw - 24px));
  padding: 8px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--glyph-panel-surface) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(0) scale(1);
}

.account-panel.expanded .account-auth-form,
.account-panel.expanded .account-session-actions,
.account-panel.expanded .account-status {
  animation: account-menu-content-in 180ms var(--ui-load-ease-out) both;
}

.account-panel.expanded .account-toggle {
  grid-area: toggle;
  justify-self: end;
  align-self: start;
}

@keyframes account-menu-content-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.account-auth-form {
  grid-area: content;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.account-project-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.account-auth-actions,
.account-project-actions {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-session-actions {
  grid-area: content;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.account-project-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-input {
  width: 100%;
  height: 29px;
  padding: 0 10px;
  background: var(--account-screen-chip-bg);
  color: var(--fg);
  outline: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  outline-offset: -1px;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
}

.account-project-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 11px;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.account-project-select-button:disabled {
  cursor: default;
  opacity: 0.44;
}

.account-project-select-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-project-select-indicator {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  opacity: 0.74;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0.5px;
  transform: translateY(-1px) rotate(45deg);
}

.account-project-select-button[aria-expanded="true"] .account-project-select-indicator {
  opacity: 1;
  transform: translateY(1px) rotate(225deg);
}

.account-project-select-shell:hover .account-project-select-indicator,
.account-project-select-button:focus-visible .account-project-select-indicator {
  opacity: 1;
}

.account-project-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  width: 100%;
  max-height: min(220px, calc(100vh - 220px));
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 10px;
  border: 0;
  background: color-mix(in srgb, var(--account-screen-chip-bg) 98%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.account-project-select-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.account-project-select-option {
  border: 0;
  border-radius: 8px;
  padding: 0 9px;
  min-height: 26px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.account-project-select-option:hover,
.account-project-select-option:focus-visible,
.account-project-select-option[aria-selected="true"] {
  background: var(--account-screen-chip-bg-active);
  color: var(--fg);
  outline: none;
}

.account-project-select-option:focus-visible {
  background: var(--account-screen-chip-bg-active);
}

.account-project-select-native {
  display: none !important;
}

.account-input:focus {
  outline: 1.5px solid var(--connection);
  outline-offset: -1.5px;
}

.account-status {
  grid-area: status;
  max-width: 100%;
  min-height: 10px;
  margin: 0;
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-size: 9px;
  font-feature-settings: "case" 1;
  line-height: 1.2;
}

.account-panel:not(.expanded) .account-status {
  display: none;
}

.canvas-status-toast {
  position: fixed;
  left: calc(max(18px, env(safe-area-inset-left)) + 30px);
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 90;
  max-width: min(300px, calc(100vw - 120px));
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 10.5px;
  font-weight: 500;
  font-feature-settings: "case" 1;
  font-variation-settings: "wdth" 630;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 250ms var(--ui-load-ease-out);
}

.canvas-status-toast.visible {
  opacity: 1;
  transform: none;
}

.account-panel.expanded ~ .canvas-status-toast {
  opacity: 0;
  transform: none;
}

.export-prompt {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.export-prompt[hidden] {
  display: none;
}

.export-prompt-panel {
  width: min(420px, calc(100vw - 48px));
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-surface) 98%, var(--bg) 2%);
  color: var(--fg);
  display: grid;
  gap: 8px;
  pointer-events: auto;
  box-shadow: none;
}

.export-prompt-header {
  display: grid;
  gap: 2px;
  padding: 4px 6px 2px;
}

.export-prompt-title,
.export-prompt-meta,
.export-prompt-action-label,
.export-prompt-action-meta {
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  letter-spacing: 0;
}

.export-prompt-title {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.export-prompt-meta {
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  font-feature-settings: "case" 1;
  font-variation-settings: "wdth" 630;
}

.export-prompt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.export-prompt-action {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px 7px;
  background: color-mix(in srgb, #ffffff 68%, var(--ui-active-surface) 32%);
  color: var(--fg);
  display: grid;
  gap: 2px;
  justify-items: start;
  align-content: center;
  text-align: left;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.export-prompt-action-wide {
  grid-column: 1 / -1;
}

.export-prompt-action-label {
  font-size: 11.5px;
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.export-prompt-action-meta {
  color: color-mix(in srgb, var(--fg) 56%, transparent);
  font-size: 9px;
  line-height: 1.1;
  font-weight: 500;
  font-feature-settings: "case" 1;
  font-variation-settings: "wdth" 630;
}

.export-prompt-action:hover,
.export-prompt-action:focus-visible,
.export-prompt-action.active {
  background: color-mix(in srgb, #ffffff 84%, var(--ui-active-surface) 16%);
  outline: none;
}

body.ipad-like-platform .export-prompt {
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.account-panel:not(.expanded) .account-screen-time,
.account-panel:not(.expanded) .account-screen-actions,
.account-panel:not(.expanded) .account-screen-credits,
.account-panel:not(.expanded) .account-meta-label,
.account-panel:not(.expanded) .account-user-label,
.account-panel:not(.expanded) .account-account-chip,
.account-panel:not(.expanded) .account-project-row {
  display: none;
}

.account-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-meta-label {
  flex: none;
  min-width: 78px;
  color: var(--fg);
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  letter-spacing: 0;
}

.account-auth-shell {
  display: grid;
  gap: 8px;
  min-width: min(300px, calc(100vw - 160px));
}

.account-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 14px;
  border-radius: 999px;
  background: var(--account-screen-chip-bg);
}

.account-account-chip-label {
  min-width: 0;
  max-width: min(42vw, 360px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account-account-chip-close {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 38%, transparent);
  cursor: pointer;
  flex: none;
}

.account-account-chip-close::before,
.account-account-chip-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 0.75px;
  background: currentColor;
}

.account-account-chip-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.account-account-chip-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.account-account-chip-close:hover,
.account-account-chip-close:focus-visible {
  color: var(--fg);
  outline: none;
}

.account-project-row {
  --account-project-select-width: min(210px, calc(100vw - 160px));
  --account-project-menu-width: min(340px, calc(100vw - 48px));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-new-project-button {
  min-width: 44px;
  padding: 0 12px;
}

.account-project-edit-button {
  position: relative;
  min-width: 54px;
  padding: 0 13px;
  font-size: 0;
  line-height: 0;
}

.account-draft-mark {
  display: none;
}

.account-panel.expanded .account-draft-mark {
  position: absolute;
  left: 50%;
  top: clamp(158px, 15.6vh, 236px);
  z-index: 0;
  display: block;
  width: calc(100vw - clamp(132px, 10vw, 208px));
  max-width: 1640px;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(-50%, 7px, 0);
  animation: account-screen-draft-in 300ms var(--ui-load-ease-out) 18ms both;
}

.account-project-edit-button::before {
  content: "";
  position: absolute;
  left: calc(50% - 7px);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    7px 0 0 currentColor,
    14px 0 0 currentColor;
  transform: translate(-50%, -50%);
}

.account-project-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  z-index: 8;
  display: grid;
  gap: 6px;
  width: var(--account-project-menu-width);
  padding: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--account-screen-chip-bg) 98%, var(--bg) 2%);
  color: var(--fg);
}

.account-project-action-menu[hidden] {
  display: none;
}

.account-project-rename-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

.account-project-rename-field {
  position: relative;
  min-width: 0;
  min-height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 74%, var(--account-screen-chip-bg-active) 26%);
  overflow: hidden;
}

.account-project-rename-selection {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  width: 0;
  height: 24px;
  border-radius: 7px;
  background: var(--text-box-selection-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
}

.account-project-rename-selection.visible {
  opacity: 1;
}

.account-project-rename-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  background: transparent;
  color: var(--fg);
  caret-color: var(--fg);
  cursor: text;
  -webkit-appearance: none;
  appearance: none;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

.account-project-rename-input::selection {
  background: transparent;
  color: var(--fg);
}

.account-project-menu-action {
  min-height: 30px;
  border-radius: 10px;
  padding: 0 11px;
  background: color-mix(in srgb, #ffffff 64%, transparent);
  color: inherit;
  justify-content: flex-start;
  opacity: 1;
}

.account-project-menu-delete {
  color: var(--sketch);
}

.account-panel.expanded {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: block;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  padding: 46px 42px 28px;
  border-radius: 0;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.account-panel.expanded .account-toggle {
  position: absolute;
  right: clamp(28px, 3vw, 48px);
  top: clamp(24px, 3vw, 44px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border-radius: 999px;
  background: var(--account-screen-chip-bg);
  color: var(--fg);
  opacity: 0.56;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
}

.account-panel.expanded .account-toggle::before,
.account-panel.expanded .account-toggle::after {
  width: 17px;
  height: 2px;
  border-radius: 999px;
  box-shadow: none;
  opacity: 1;
  background: currentColor;
}

.account-panel.expanded .account-toggle::before {
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.account-panel.expanded .account-toggle::after {
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}

.account-panel.expanded .account-toggle:hover,
.account-panel.expanded .account-toggle:focus-visible {
  background: var(--account-screen-chip-bg-active);
  opacity: 1;
}

.account-panel.expanded .account-toggle::selection {
  background: transparent;
}

.account-panel.expanded .account-toggle::marker {
  display: none;
}

.account-panel.expanded .account-toggle::before,
.account-panel.expanded .account-toggle::after {
  z-index: 1;
}

.account-panel.expanded .account-auth-form,
.account-panel.expanded .account-session-actions {
  position: absolute;
  left: clamp(28px, 3vw, 48px);
  top: clamp(36px, 3.4vw, 54px);
  z-index: 2;
  display: grid;
  gap: 14px;
  width: min(460px, calc(100vw - 96px));
}

.account-panel.expanded .account-auth-form {
  align-items: start;
}

.account-panel.expanded .account-session-actions {
  align-items: start;
  gap: 8px;
}

.account-panel.expanded .account-meta-row {
  align-items: center;
  gap: 18px;
}

.account-panel.expanded .account-meta-row-account {
  align-items: flex-start;
}

.account-panel.expanded.signed-in .account-meta-row-account {
  align-items: center;
}

.account-panel.expanded .account-meta-row-project {
  align-items: center;
}

.account-panel.expanded .account-input,
.account-panel.expanded .account-project-select,
.account-panel.expanded .account-action {
  min-height: 40px;
  border-radius: 999px;
  background: var(--account-screen-chip-bg);
  outline: none;
}

.account-panel.expanded .account-project-rename-input {
  background: transparent;
}

.account-panel.expanded .account-project-menu-action {
  background: color-mix(in srgb, #ffffff 64%, transparent);
}

.account-panel.expanded .account-project-select,
.account-panel.expanded .account-account-chip {
  transition:
    background 120ms ease,
    color 120ms ease;
}

.account-panel.ipad-account-locked .account-account-chip {
  pointer-events: none;
}

.account-panel.ipad-account-locked .account-account-chip-close {
  opacity: 0;
}

.account-panel.expanded .account-project-select-button:not(:disabled):hover,
.account-panel.expanded .account-project-select-button:not(:disabled):focus-visible,
.account-panel.expanded .account-project-select-button[aria-expanded="true"],
.account-panel.expanded .account-account-chip:hover,
.account-panel.expanded .account-account-chip:focus-within {
  background: var(--account-screen-chip-bg-active);
}

.account-panel.expanded .account-project-select-button:not(:disabled):hover,
.account-panel.expanded .account-project-select-button:not(:disabled):focus-visible {
  outline: none;
}

.account-panel.expanded .account-input {
  padding: 0 15px;
}

.account-panel.expanded .account-auth-actions {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px;
}

.account-panel.expanded .account-session-actions .account-project-actions,
.account-panel.expanded .accountProjectTitle {
  display: none !important;
}

.account-panel.expanded .account-meta-label {
  min-width: 92px;
  color: color-mix(in srgb, var(--fg) 88%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.account-panel.expanded .account-meta-row-account .account-meta-label {
  padding-top: 0;
}

.account-panel.expanded .account-auth-shell {
  width: var(--account-screen-field-width);
  min-width: 0;
}

.account-panel.expanded .account-account-chip {
  width: var(--account-screen-field-width);
  min-height: 40px;
  padding: 0 13px 0 15px;
  background: var(--account-screen-chip-bg);
}

.account-panel.expanded .account-account-chip-label,
.account-panel.expanded .account-project-select-label,
.account-panel.expanded .account-input,
.account-panel.expanded .account-action {
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.account-panel.expanded .account-account-chip-label,
.account-panel.expanded .account-project-select-label {
  display: block;
  transform: translateY(0.7px);
}

.account-panel.expanded .account-project-select-label {
  transform: translateY(1.2px);
}

.account-panel.expanded .account-account-chip-label {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-panel.expanded .account-action,
.account-panel.expanded .account-project-select-button,
.account-panel.expanded .account-account-chip {
  line-height: 1;
}

.account-panel.expanded .account-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
}

.account-panel.expanded .account-project-select-button,
.account-panel.expanded .account-account-chip {
  align-items: center;
  padding-top: 1px;
}

.account-panel.expanded .account-project-row {
  --account-project-select-width: var(--account-screen-field-width);
  --account-project-menu-width: var(--account-project-select-width);
  gap: 10px;
}

.account-panel.expanded .account-project-select-shell {
  width: var(--account-project-select-width);
}

.account-panel.expanded.creating-project .account-project-select-shell {
  opacity: 0.46;
}

.account-panel.expanded.creating-project .account-project-edit-button,
.account-panel.expanded.creating-project .account-project-action-menu {
  display: none;
}

.account-panel.expanded .account-project-title {
  width: min(300px, calc(100vw - 96px));
  margin-left: 0;
}

.account-panel.expanded .account-project-select-menu {
  top: calc(100% + 8px);
  width: 100%;
  padding: 6px;
  border-radius: 14px;
  border-color: transparent;
  background: color-mix(in srgb, var(--account-screen-chip-bg) 98%, var(--bg) 2%);
  box-shadow: none;
}

.account-panel.expanded .account-project-select-option {
  min-height: 30px;
  border-radius: 10px;
  padding: 0 10px;
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.account-panel.expanded .account-new-project-button {
  min-width: 0;
  padding: 0 14px;
}

.account-panel.expanded:not(.creating-project) .account-new-project-button,
.account-panel.expanded .account-project-edit-button {
  position: relative;
  flex: none;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: var(--account-screen-chip-bg);
  transition:
    background 120ms ease,
    opacity 120ms ease,
    color 120ms ease;
}

.account-panel.expanded:not(.creating-project) .account-new-project-button::before,
.account-panel.expanded:not(.creating-project) .account-new-project-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center center;
}

.account-panel.expanded:not(.creating-project) .account-new-project-button::before,
.account-panel.expanded:not(.creating-project) .account-new-project-button::after {
  width: 17px;
  height: 2px;
}

.account-panel.expanded:not(.creating-project) .account-new-project-button::before {
  transform: translate(-50%, -50%);
}

.account-panel.expanded:not(.creating-project) .account-new-project-button::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.account-panel.expanded .account-project-edit-button[aria-expanded="true"],
.account-panel.expanded .account-project-edit-button:hover,
.account-panel.expanded .account-project-edit-button:focus-visible {
  background: var(--account-screen-chip-bg-active);
  opacity: 1;
  outline: none;
}

.account-panel.expanded .account-project-menu-action:hover,
.account-panel.expanded .account-project-menu-action:focus-visible,
.account-panel.expanded .account-project-rename-field:focus-within {
  background: color-mix(in srgb, #ffffff 82%, var(--account-screen-chip-bg-active) 18%);
  outline: none;
}

.account-panel.expanded .account-project-action-menu {
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  font-weight: 500;
  font-variation-settings: "wdth" 630;
}

.account-panel.expanded .account-project-rename-input,
.account-panel.expanded .account-project-menu-action {
  min-height: 34px;
  padding-top: 2px;
}

.account-screen-time {
  position: absolute;
  right: clamp(42px, 4vw, 62px);
  bottom: clamp(14px, 1.9vw, 26px);
  z-index: 1;
  color: var(--fg);
  font-family: var(--account-screen-display-family);
  font-size: var(--account-screen-display-size);
  line-height: 0.98;
  font-feature-settings: "ss02" 1, "case" 1;
  font-weight: 100;
  font-variation-settings: "wdth" 630;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: translateY(0.025em);
}

.account-screen-actions {
  position: absolute;
  left: clamp(28px, 3vw, 48px);
  bottom: clamp(14px, 1.9vw, 26px);
  z-index: 1;
  display: grid;
  gap: clamp(4px, 0.7vw, 12px);
}

.account-screen-action {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.account-screen-action:focus,
.account-screen-action:focus-visible {
  outline: none;
  box-shadow: none;
}

.account-screen-action-key,
.account-screen-action-label {
  display: inline-block;
  font-family: var(--account-screen-display-family);
  font-weight: 100;
  font-size: var(--account-screen-display-size);
  line-height: 0.77;
  font-variation-settings: "wdth" 600;
  font-feature-settings: "ss02" 1, "case" 1;
  letter-spacing: -0.065em;
  padding-block: 0.115em 0.075em;
  margin-block: -0.115em -0.075em;
}

.account-screen-action-key {
  font-feature-settings: "ss02" 1, "case" 1;
  text-transform: uppercase;
  margin-right: -0.01em;
}

.account-screen-action-label {
  transition: opacity 150ms ease;
}

body.ipad-like-platform .account-screen-action-key,
body.ipad-like-platform .account-screen-action-label {
  line-height: 0.84;
}

.account-screen-action-canvas .account-screen-action-key {
  color: var(--connection);
}

.account-screen-action-glyph .account-screen-action-key,
body.theme-blue .account-screen-action-glyph .account-screen-action-key {
  color: var(--selection-extra);
}

.account-screen-action-theme .account-screen-action-key {
  color: var(--sketch);
}

.account-screen-action:hover .account-screen-action-label,
.account-screen-action:focus-visible .account-screen-action-label {
  opacity: 0.42;
}

.account-screen-credits {
  position: absolute;
  right: clamp(112px, 8vw, 150px);
  top: clamp(36px, 3.4vw, 54px);
  z-index: 1;
  color: color-mix(in srgb, var(--fg) 76%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 15px;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: left;
  white-space: pre;
}

.account-panel.expanded .account-status {
  position: absolute;
  left: calc(clamp(28px, 3vw, 48px) + 30px);
  bottom: clamp(7px, 1vw, 14px);
  z-index: 2;
  width: min(430px, calc(100vw - 96px));
  max-width: min(430px, calc(100vw - 96px));
  min-height: 0;
  margin: 0;
  color: color-mix(in srgb, var(--fg) 46%, transparent);
  font-size: var(--account-screen-small-size);
  line-height: var(--account-screen-small-line-height);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-weight: 500;
  font-feature-settings: "case" 1;
  font-variation-settings: "wdth" 630;
}

.account-panel.expanded .account-auth-form,
.account-panel.expanded .account-session-actions,
.account-panel.expanded .account-status,
.account-panel.expanded .account-screen-time,
.account-panel.expanded .account-screen-credits {
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.996);
  animation: account-screen-content-in 250ms var(--ui-load-ease-out) both;
}

.account-panel.expanded .account-screen-action {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.992);
  animation: account-screen-content-in 310ms var(--ui-load-ease-out) both;
}

.account-panel.expanded .account-screen-time { animation-delay: 12ms; }
.account-panel.expanded .account-screen-credits { animation-delay: 28ms; }
.account-panel.expanded .account-screen-action:nth-child(1) { animation-delay: 44ms; }
.account-panel.expanded .account-screen-action:nth-child(2) { animation-delay: 82ms; }
.account-panel.expanded .account-screen-action:nth-child(3) { animation-delay: 120ms; }
.account-panel.expanded .account-auth-form,
.account-panel.expanded .account-session-actions { animation-delay: 60ms; }
.account-panel.expanded .account-status { animation-delay: 76ms; }

.account-panel.expanded.closing .account-auth-form,
.account-panel.expanded.closing .account-session-actions,
.account-panel.expanded.closing .account-status,
.account-panel.expanded.closing .account-screen-time,
.account-panel.expanded.closing .account-screen-credits {
  animation: account-screen-content-out 150ms cubic-bezier(0.4, 0, 1, 1) both;
}

.account-panel.expanded.closing .account-screen-action {
  animation: account-screen-content-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

.account-panel.expanded.closing .account-status { animation-delay: 0ms; }
.account-panel.expanded.closing .account-auth-form,
.account-panel.expanded.closing .account-session-actions { animation-delay: 10ms; }
.account-panel.expanded.closing .account-screen-action:nth-child(3) { animation-delay: 6ms; }
.account-panel.expanded.closing .account-screen-action:nth-child(2) { animation-delay: 16ms; }
.account-panel.expanded.closing .account-screen-action:nth-child(1) { animation-delay: 26ms; }
.account-panel.expanded.closing .account-screen-credits { animation-delay: 26ms; }
.account-panel.expanded.closing .account-screen-time { animation-delay: 34ms; }

.account-panel.expanded.closing .account-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.account-panel.expanded.closing .account-draft-mark {
  animation: account-screen-draft-out 150ms cubic-bezier(0.4, 0, 1, 1) both;
}

.account-panel.returning-toggle {
  width: max-content;
  max-width: min(292px, calc(100vw - 24px));
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: none;
}

.account-panel.returning-toggle .account-toggle {
  transform: none;
  transition:
    background 120ms ease,
    color 120ms ease;
  animation: account-toggle-return-fade 170ms ease both;
}

@keyframes account-screen-content-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes account-screen-content-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(0.996);
  }
}

@keyframes account-screen-draft-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, 7px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes account-screen-draft-out {
  from {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-50%, 3px, 0);
  }
}

@keyframes account-toggle-return-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.56;
  }
}

@media (max-width: 700px), (hover: none) and (max-height: 520px) {
  .account-panel {
    display: none !important;
  }
}

.minimap-button {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 28;
  width: var(--canvas-control-circle-size, 42px);
  height: var(--canvas-control-circle-size, 42px);
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--ui-surface);
  color: var(--fg);
  opacity: 0.68;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition:
    opacity 130ms ease,
    transform 150ms var(--ui-load-ease-out),
    background 120ms ease,
    color 120ms ease;
}

.ui-loading .minimap-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.84);
  transition-delay: 0ms;
}

.minimap-button::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
}

.minimap-button:hover,
.minimap-button:focus-visible,
.minimap-button.active {
  opacity: 0.98;
  transform: none;
}

.minimap-button:focus,
.minimap-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.minimap-button-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  border: none;
  background: currentColor;
  transform: translate(calc(-50% - 0.05px), calc(-50% - 0.45px));
  -webkit-mask: var(--svg-search-magnifier) center / contain no-repeat;
  mask: var(--svg-search-magnifier) center / contain no-repeat;
}

.minimap-button-icon::before,
.minimap-button-icon::after {
  display: none;
}

.minimap-panel {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 27;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: clamp(232px, 25.5vw, 324px);
  height: clamp(170px, 20vw, 240px);
  padding: 0;
  border-radius: 8px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transform-origin: left bottom;
  transition:
    opacity 190ms ease,
    transform 260ms var(--ui-load-ease-out);
}

.minimap-panel.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.minimap-search {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: var(--canvas-control-circle-size, 42px);
  margin-left: calc(var(--canvas-control-circle-size, 42px) + 8px);
  border-radius: 999px;
  background: var(--ui-surface);
  opacity: 0;
  transform: translateY(9px) scale(0.985);
  transform-origin: left center;
  transition:
    opacity 120ms ease 0ms,
    transform 180ms var(--ui-load-ease-out) 0ms;
  will-change: opacity, transform;
}

.minimap-panel.visible .minimap-search {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 70ms, 70ms;
}

.minimap-close {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 7px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--fg) 5.5%, transparent);
  color: color-mix(in srgb, var(--fg) 58%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  transition:
    opacity 90ms ease 35ms,
    color 100ms ease,
    background 100ms ease,
    transform 120ms var(--ui-load-ease-out);
  opacity: 0;
  transform: scale(0.92);
}

.minimap-close::before,
.minimap-close::after {
  content: "";
  position: absolute;
  left: 6.3px;
  right: 6.3px;
  top: 11.25px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

.minimap-close::before {
  transform: rotate(45deg);
}

.minimap-close::after {
  transform: rotate(-45deg);
}

.minimap-close:hover,
.minimap-close:focus-visible {
  color: var(--fg);
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}

.minimap-panel.visible .minimap-close {
  opacity: 1;
  transform: scale(1);
  transition-delay: 95ms, 0ms, 0ms, 95ms;
}

.minimap-close:focus,
.minimap-close:focus-visible {
  outline: none;
  box-shadow: none;
}

.minimap-search-input {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 999px;
  padding: 0 34px 0 18px;
  background: transparent;
  color: var(--fg);
  caret-color: var(--fg);
  font: 500 13px/1 "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
}

.minimap-search:focus,
.minimap-search:focus-visible {
  outline: none;
}

.minimap-search.hardware-keyboard-search .minimap-search-input {
  caret-color: transparent;
}

.minimap-search-input::selection {
  background: transparent;
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
}

.minimap-search-input::placeholder {
  color: color-mix(in srgb, var(--fg) 42%, transparent);
  opacity: 1;
}

.minimap-search-selection {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.minimap-search-selection-range {
  position: absolute;
  border-radius: 5px;
  background: var(--text-box-selection-bg);
}

.minimap-search-caret {
  position: absolute;
  width: 1.8px;
  min-height: 14px;
  border-radius: 999px;
  background: var(--fg);
  transform: translateX(-50%);
  animation: minimap-search-caret-blink 1s steps(1, end) infinite;
}

@keyframes minimap-search-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.minimap-search-input::-webkit-search-decoration,
.minimap-search-input::-webkit-search-cancel-button {
  display: none;
}

.minimap-search-clear {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 7px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--fg) 66%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.82);
  transition:
    opacity 80ms ease,
    transform 110ms var(--ui-load-ease-out),
    color 90ms ease;
  cursor: pointer;
}

.minimap-search-clear::before {
  content: "⌫";
  position: absolute;
  left: 50%;
  top: 50%;
  font: 500 14px/20px "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  transform: translate(-50%, -50%);
}

.minimap-search.has-query .minimap-search-clear {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.minimap-search-clear:hover,
.minimap-search-clear:focus-visible {
  background: transparent;
  color: var(--fg);
}

.minimap-search-results {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: auto;
  bottom: calc(100% + 10px);
  max-height: min(146px, 42vh);
  overflow: hidden;
  padding: 2px;
  border-radius: 8px;
  background: var(--ui-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px) scale(0.98);
  transform-origin: bottom center;
  transition:
    opacity 90ms ease,
    transform 110ms var(--ui-load-ease-out);
}

.minimap-panel.searching .minimap-search-results {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.minimap-search-result {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0 0 2px;
  border: none;
  border-radius: 6px;
  padding: 0 26px 0 8px;
  background: color-mix(in srgb, var(--glyph-panel-surface) 94%, var(--bg) 6%);
  color: var(--fg);
  font: 500 12px/24px "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.98;
  cursor: pointer;
}

.minimap-panel.searching .minimap-search-result {
  animation: minimap-search-result-in 150ms var(--ui-load-ease-out) both;
  animation-delay: calc(var(--minimap-search-result-index, 0) * 22ms);
}

.minimap-panel.searching .minimap-search-results.no-result-animation .minimap-search-result {
  animation: none;
}

.minimap-panel.searching .minimap-search-result:nth-child(1) {
  --minimap-search-result-index: 0;
}

.minimap-panel.searching .minimap-search-result:nth-child(2) {
  --minimap-search-result-index: 1;
}

.minimap-panel.searching .minimap-search-result:nth-child(3) {
  --minimap-search-result-index: 2;
}

.minimap-panel.searching .minimap-search-result:nth-child(4) {
  --minimap-search-result-index: 3;
}

.minimap-panel.searching .minimap-search-result:nth-child(5) {
  --minimap-search-result-index: 4;
}

@keyframes minimap-search-result-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 0.98;
    transform: translateY(0) scale(1);
  }
}

.minimap-search-result:last-child {
  margin-bottom: 0;
}

.minimap-search-result-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  opacity: 0.86;
  transform: translateY(-50%);
  transition:
    background 90ms ease,
    color 90ms ease,
    opacity 90ms ease;
}

.minimap-search-result-clear::before,
.minimap-search-result-clear::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 7px;
  height: 1.35px;
  border-radius: 999px;
  background: currentColor;
}

.minimap-search-result-clear::before {
  transform: rotate(45deg);
}

.minimap-search-result-clear::after {
  transform: rotate(-45deg);
}

.minimap-search-result-clear:hover {
  color: var(--fg);
  opacity: 1;
  background: color-mix(in srgb, var(--fg) 13%, transparent);
}

.minimap-search-result:hover,
.minimap-search-result.active {
  background: color-mix(in srgb, var(--glyph-panel-surface) 87%, var(--fg) 8%);
}

.minimap-search-empty {
  box-sizing: border-box;
  height: 24px;
  padding: 0 8px;
  color: color-mix(in srgb, var(--fg) 52%, transparent);
  font: 500 12px/24px "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
}

@media (prefers-reduced-motion: reduce) {
  .minimap-panel.searching .minimap-search-result {
    animation: none;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  body.ipad-like-platform .minimap-close {
    width: 34px;
    height: 34px;
  }

  body.ipad-like-platform .minimap-close::before,
  body.ipad-like-platform .minimap-close::after {
    left: 9px;
    right: 9px;
    top: 16.1px;
    height: 1.75px;
  }

  body.ipad-like-platform .minimap-search-clear {
    display: grid;
    place-items: center;
  }

  body.ipad-like-platform .minimap-search-clear::before {
    position: static;
    font-size: 15px;
    line-height: 1;
    transform: translateY(0.5px);
  }

  body.ipad-like-platform .minimap-search-result {
    height: 36px;
    padding: 6px 34px 6px 12px;
    font-size: 13px;
    line-height: 24px;
  }

  body.ipad-like-platform .minimap-search-empty {
    height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 24px;
  }

  body.ipad-like-platform .grid-element-picker {
    gap: 8px;
    padding: 7px 8px;
    --grid-element-indicator-y: 7px;
  }

  body.ipad-like-platform .grid-element-picker::before,
  body.ipad-like-platform .grid-element-option {
    width: 31px;
    height: 31px;
  }

  body.ipad-like-platform .grid-element-option-arrow::before {
    width: 14px;
    height: 2.4px;
  }

  body.ipad-like-platform .grid-element-option-arrow::after {
    width: 8px;
    height: 8px;
    border-top-width: 2.4px;
    border-right-width: 2.4px;
  }

  body.ipad-like-platform .grid-element-option-circle::before {
    width: 16px;
    height: 16px;
  }

  body.ipad-like-platform .grid-element-option-rectangle::before {
    width: 18px;
    height: 13px;
  }

  body.ipad-like-platform .grid-element-option-diamond::before {
    width: 13px;
    height: 13px;
  }

  body.ipad-like-platform .grid-element-option-bracket::before {
    width: 12px;
    height: 17px;
  }

  body.ipad-like-platform .grid-element-option-plus::before {
    width: 17px;
    height: 17px;
  }

  body.ipad-like-platform .grid-element-picker.line-font-picker {
    width: 216px;
    gap: 12px;
    padding: 10px 12px;
  }

  body.ipad-like-platform .line-font-search-row {
    gap: 10px;
  }

  body.ipad-like-platform .line-font-word-field,
  body.ipad-like-platform .line-font-editor-link {
    height: 34px;
  }

  body.ipad-like-platform .line-font-glyph-grid {
    gap: 7px;
  }

  body.ipad-like-platform .line-font-glyph-option {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  body.ipad-like-platform .line-end-picker {
    gap: 8px;
    padding: 6px 8px;
    --context-indicator-x: 8px;
    --context-indicator-width: 32px;
    --context-indicator-height: 29px;
    --context-indicator-y: 6px;
  }

  body.ipad-like-platform .line-end-option,
  body.ipad-like-platform .shape-option,
  body.ipad-like-platform .add-option {
    width: 32px;
    height: 29px;
  }

  body.ipad-like-platform .line-end-divider,
  body.ipad-like-platform .selection-weight-divider,
  body.ipad-like-platform .line-end-weight-divider {
    height: 18px;
  }

  body.ipad-like-platform .selection-color-picker {
    gap: 10px;
    padding: 8px 10px;
  }

  body.ipad-like-platform .selection-color-option,
  body.ipad-like-platform .line-end-color-option,
  body.ipad-like-platform .line-end-text-weight-option,
  body.ipad-like-platform .selection-bold-option {
    flex-basis: 27px;
    width: 27px;
    min-width: 27px;
    max-width: 27px;
    height: 27px;
    min-height: 27px;
    max-height: 27px;
  }

  body.ipad-like-platform .selection-color-option::before,
  body.ipad-like-platform .selection-bold-option::before {
    inset: 4px;
  }

  body.ipad-like-platform .selection-color-option.active::before,
  body.ipad-like-platform .selection-color-option.next-active::before {
    inset: 3px;
  }

  body.ipad-like-platform .selection-structure-toggle,
  body.ipad-like-platform .selection-text-scale-option {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 29px;
    min-height: 29px;
    max-height: 29px;
  }

  body.ipad-like-platform .selection-text-scale-option {
    --scale-icon-size: 16px;
  }

  body.ipad-like-platform .selection-pill-toggle::before {
    inset: 6px 5px;
  }

  body.ipad-like-platform .selection-pill-toggle::after {
    left: 10px;
    right: 10px;
  }

  body.ipad-like-platform .command-add-picker {
    --command-add-radius: 76px;
    --command-add-option-size: 52px;
    --command-add-icon-scale: 1.16;
  }

  body.ipad-like-platform .command-add-picker .add-option {
    width: var(--command-add-option-size);
    height: var(--command-add-option-size);
    min-width: var(--command-add-option-size);
    min-height: var(--command-add-option-size);
    border-radius: 999px;
  }

  body.ipad-like-platform .add-picker {
    --side-add-picker-size: 232px;
    --side-add-button-right: max(80px, calc(env(safe-area-inset-right) + 80px));
    --side-add-picker-offset: -92px;
  }

  body.ipad-like-platform .add-picker .add-option {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    border-radius: 999px;
    --add-option-icon-scale: 1.14;
  }

  body.ipad-like-platform .add-picker .add-option-image {
    --add-option-x: -102px;
    --add-option-y: -86px;
  }

  body.ipad-like-platform .add-picker .add-option-list {
    --add-option-x: -136px;
    --add-option-y: -31px;
  }

  body.ipad-like-platform .add-picker .add-option-text-box {
    --add-option-x: -136px;
    --add-option-y: 43px;
  }

  body.ipad-like-platform .add-picker .add-option-pill {
    --add-option-x: -101px;
    --add-option-y: 98px;
  }

  body.ipad-like-platform .arrow-glyph-picker {
    width: 246px;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  body.ipad-like-platform .arrow-glyph-grid {
    gap: 14px;
  }

  body.ipad-like-platform .arrow-glyph-option {
    border-radius: 13px;
    font-size: 15px;
  }

  body.ipad-like-platform .arrow-glyph-option::before {
    border-radius: 13px;
  }

  body.ipad-like-platform .arrow-glyph-color-row {
    gap: 10px;
    padding: 8px 10px;
  }

  body.ipad-like-platform .note-fullscreen-control {
    --note-fullscreen-hit-size: 44px;
    --note-fullscreen-dot-size: 30px;
  }

  body.ipad-like-platform .text-box-focus-overlay {
    --text-box-focus-note-control-size: 32px;
    --text-box-focus-control-icon-length: 19px;
  }

  body.ipad-like-platform .note-focus-close {
    width: 40px;
    height: 40px;
  }

  body.ipad-like-platform .note-focus-close::before {
    width: 18px;
    height: 18px;
  }

  body.ipad-like-platform .text-box-focus-close::before {
    width: 18px;
  }

  body.ipad-like-platform .text-box-focus-close::after {
    height: 18px;
  }

  body.ipad-like-platform .text-box-focus-tabs .text-box-focus-add-icon::before {
    width: 18px;
  }

  body.ipad-like-platform .text-box-focus-tabs .text-box-focus-add-icon::after {
    height: 18px;
  }

  body.ipad-like-platform .text-box-focus-tab-date {
    line-height: 1.18;
    padding-top: 2px;
    margin-top: -2px;
  }

  body.ipad-like-platform .minimap-button,
  body.ipad-like-platform .minimap-panel {
    left: max(80px, calc(env(safe-area-inset-left) + 80px));
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px));
  }

  body.ipad-like-platform .drop-delete-target {
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px));
    background: var(--ui-surface);
  }

  body.ipad-like-platform .drop-delete-target.visible {
    opacity: 1;
  }

  body.ipad-like-platform .drop-delete-target.active {
    background: #ff5050;
    color: #fff;
    border-color: color-mix(in srgb, #ff5050 82%, #ffffff 18%);
  }

  body.ipad-like-platform .account-panel:not(.expanded) {
    right: max(80px, calc(env(safe-area-inset-right) + 80px));
    bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px));
    padding: 0;
    max-width: var(--canvas-control-circle-size, 42px);
  }

  body.ipad-like-platform .image-upload-button {
    right: max(80px, calc(env(safe-area-inset-right) + 80px));
  }

  body.ipad-like-platform .account-panel:not(.expanded) .account-toggle {
    width: var(--canvas-control-circle-size, 42px);
    min-width: var(--canvas-control-circle-size, 42px);
    height: var(--canvas-control-circle-size, 42px);
    min-height: var(--canvas-control-circle-size, 42px);
    border-radius: 999px;
    background: var(--ui-surface);
    color: color-mix(in srgb, var(--fg) 66%, transparent);
    opacity: 0.68;
  }

  body.ipad-like-platform .account-panel:not(.expanded) .account-toggle:hover,
  body.ipad-like-platform .account-panel:not(.expanded) .account-toggle:focus-visible,
  body.theme-grey.ipad-like-platform .account-panel:not(.expanded) .account-toggle {
    background: var(--ui-surface);
    color: color-mix(in srgb, var(--fg) 66%, transparent);
  }

  body.ipad-like-platform .account-panel:not(.expanded) .account-toggle::before {
    width: 3.2px;
    height: 3.2px;
    box-shadow:
      -6.2px 0 0 currentColor,
      6.2px 0 0 currentColor;
  }

  body.ipad-like-platform .account-panel.expanded .account-toggle {
    right: calc(clamp(28px, 3vw, 48px) + 10px);
  }

  body.ipad-like-platform .account-panel.expanded .account-status {
    left: calc(clamp(28px, 3vw, 48px) + 40px);
  }

  body.ipad-like-platform .account-panel.expanded .account-draft-mark {
    top: clamp(178px, 17vh, 256px);
  }

  body.ipad-like-platform .canvas-status-toast {
    left: calc(max(18px, env(safe-area-inset-left)) + 40px);
  }
}

.minimap-canvas {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: color-mix(in srgb, var(--glyph-panel-surface) 96%, var(--bg) 4%);
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transform: translateY(8px) scale(0.99);
  transform-origin: left bottom;
  transition:
    opacity 145ms ease 30ms,
    transform 240ms var(--ui-load-ease-out) 30ms;
  will-change: opacity, transform;
}

.minimap-panel.visible .minimap-canvas {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0ms, 0ms;
}

.minimap-panel.dragging .minimap-canvas {
  cursor: grabbing;
}

body.fullscreen-focus-canvas-animating .write-layer {
  transition:
    transform var(--fullscreen-focus-zoom-duration) cubic-bezier(0.16, 1, 0.3, 1),
    opacity calc(var(--fullscreen-focus-zoom-duration) * 0.82) ease;
  will-change: transform, opacity;
}

body.fullscreen-focus-canvas-returning .write-layer {
  transition:
    transform var(--fullscreen-focus-zoom-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity calc(var(--fullscreen-focus-zoom-duration) * 0.84) ease;
}

body.fullscreen-focus-canvas-zoomed .write-layer {
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(
      var(--fullscreen-focus-zoom-x),
      var(--fullscreen-focus-zoom-y),
      0
    )
    scale(var(--fullscreen-focus-zoom-scale));
}

.scene-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100lvh;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}

.text-box-dom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.text-box-dom-field {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--fg);
  white-space: pre;
  font-family: var(--text-box-font-family);
  font-feature-settings: "ss02" 1;
  font-style: normal;
  font-weight: var(--text-box-font-weight);
  font-variation-settings: var(--text-box-font-variation-settings);
  letter-spacing: -0.01em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.text-box-dom-field.overflowing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--text-box-dom-fade-height, 18px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text-box-dom-field-bg, var(--bg)) 0%, transparent),
    var(--text-box-dom-field-bg, var(--bg))
  );
  pointer-events: none;
}

.text-box-dom-line {
  position: absolute;
  white-space: pre;
}

.text-box-dom-line-strike {
  position: absolute;
  left: 0;
  display: block;
  border-radius: 999px;
  pointer-events: none;
}

.text-box-dom-measure {
  position: fixed;
  left: -10000px;
  top: -10000px;
  display: inline-block;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  contain: layout style;
}

.drag-tool-dots {
  position: fixed;
  left: calc(50% - var(--tool-cluster-center-offset));
  top: max(28px, calc(env(safe-area-inset-top) + 28px));
  transform: translateX(-50%);
  z-index: var(--top-tools-z-index);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tool-dot-gap);
  padding: var(--tool-dot-pad);
  border-radius: 999px;
  background: var(--ui-surface);
  transition: opacity 460ms ease, transform 720ms var(--ui-load-ease);
  transition-delay: 40ms;
}

.drag-tool-dots::before {
  display: none;
}

body.ipad-like-platform .drag-tool-dots {
  top: max(16px, calc(env(safe-area-inset-top) + 16px));
}

.ui-loading .drag-tool-dots {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(0.985);
  transition-delay: 0ms;
}

.glyph-editor-launch-button {
  position: fixed;
  left: calc(
    50% +
    (var(--tool-rail-width) * 0.5) +
    var(--tool-dot-gap) +
    (var(--tool-rail-height) * 0.5) -
    var(--tool-cluster-center-offset)
  );
  top: max(28px, calc(env(safe-area-inset-top) + 28px));
  transform: translateX(-50%);
  z-index: var(--top-tools-z-index);
  width: var(--tool-rail-height);
  height: var(--tool-rail-height);
  border-radius: 999px;
  background: var(--ui-surface);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition:
    opacity 460ms ease,
    transform 720ms var(--ui-load-ease),
    background 120ms ease;
  transition-delay: 40ms, 40ms, 0ms;
}

body.ipad-like-platform .glyph-editor-launch-button {
  top: max(16px, calc(env(safe-area-inset-top) + 16px));
}

.ui-loading .glyph-editor-launch-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(0.985);
  transition-delay: 0ms;
}

.account-panel.expanded ~ .drag-tool-dots,
.account-panel.expanded ~ .glyph-editor-launch-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(0.985);
  transition-delay: 0ms;
}

.account-panel.expanded ~ .image-upload-button,
.account-panel.expanded ~ .add-picker,
.account-panel.expanded ~ .command-add-picker {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0ms;
}

.account-panel.expanded ~ .image-upload-button {
  transform: translateY(-50%) scale(0.985);
}

.account-panel.expanded ~ .add-picker {
  transform: translate(0, -50%) scale(0.985);
}

.glyph-editor-launch-button::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

.glyph-editor-launch-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tool-dot-core-size);
  height: var(--tool-dot-core-size);
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.96);
  transform: translate(calc(-50% - 0.15px), calc(-50% + 0.35px));
  transition:
    width 220ms var(--ui-load-ease-out),
    height 220ms var(--ui-load-ease-out),
    transform 220ms var(--ui-load-ease-out);
}

body.theme-dim .glyph-editor-launch-dot,
body.theme-blue .glyph-editor-launch-dot,
body.theme-dark .glyph-editor-launch-dot {
  background: rgba(255, 255, 255, 0.96);
}

.glyph-editor-launch-button:hover .glyph-editor-launch-dot,
.glyph-editor-launch-button:focus-visible .glyph-editor-launch-dot {
  width: var(--tool-dot-hover-size);
  height: var(--tool-dot-hover-size);
}

.glyph-editor-launch-button:focus,
.glyph-editor-launch-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.drag-tool-dot {
  position: relative;
  width: var(--tool-dot-size);
  height: var(--tool-dot-size);
  margin: 0;
  border-radius: 999px;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 520ms ease, transform 780ms var(--ui-load-ease);
  transition-delay: var(--ui-load-delay, 0ms);
  z-index: 1;
}

.drag-tool-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tool-dot-core-size);
  height: var(--tool-dot-core-size);
  border-radius: 999px;
  background: var(--dot-color, var(--accent));
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    width 220ms var(--ui-load-ease-out),
    height 220ms var(--ui-load-ease-out),
    transform 220ms var(--ui-load-ease-out),
    background 120ms ease,
    opacity 120ms ease;
  pointer-events: none;
}

.ui-loading .drag-tool-dot {
  opacity: 0;
  transform: translateY(-8px) scale(0.82);
  transition-delay: 0ms;
}

.drag-tool-dot:nth-child(1) {
  --ui-load-delay: 90ms;
}

.drag-tool-dot:nth-child(2) {
  --ui-load-delay: 170ms;
}

.drag-tool-dot:nth-child(3) {
  --ui-load-delay: 250ms;
}

.drag-tool-dot:nth-child(4) {
  --ui-load-delay: 330ms;
}

.drag-tool-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

.drag-tool-dot:focus,
.drag-tool-dot:focus-visible {
  outline: none;
  box-shadow: none;
}

.drag-tool-dot:hover::before,
.drag-tool-dot:focus-visible::before {
  width: var(--tool-dot-hover-size);
  height: var(--tool-dot-hover-size);
}

.drag-tool-dot.active::before {
  width: var(--tool-dot-active-size);
  height: var(--tool-dot-active-size);
}

.drag-tool-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tool-dot-icon-size);
  height: var(--tool-dot-icon-size);
  --tool-icon-offset-x: 0px;
  --tool-icon-offset-y: 0px;
  color: #ffffff;
  fill: currentColor;
  stroke: none;
  transform:
    translate(
      calc(-50% + var(--tool-icon-offset-x)),
      calc(-50% + var(--tool-icon-offset-y))
    )
    scale(0.72);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: color 120ms ease, opacity 140ms ease, transform 220ms var(--ui-load-ease-out);
  z-index: 1;
}

.drag-tool-dot.active .drag-tool-icon {
  opacity: 1;
  transform:
    translate(
      calc(-50% + var(--tool-icon-offset-x)),
      calc(-50% + var(--tool-icon-offset-y))
    )
    scale(1);
}

.drag-tool-icon-select {
  --tool-icon-offset-x: 1px;
  --tool-icon-offset-y: -1px;
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.drag-tool-icon-select-default,
.drag-tool-icon-select-classic,
.drag-tool-icon-draw-grid,
.drag-tool-icon-draw-freehand,
.drag-tool-icon-text-box::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
  -webkit-mask: var(--tool-icon-mask) center / contain no-repeat;
  mask: var(--tool-icon-mask) center / contain no-repeat;
}

.drag-tool-icon-select-default {
  --tool-icon-mask: var(--svg-tool-select-pointer);
}

.drag-tool-icon-select-classic {
  --tool-icon-mask: var(--svg-tool-select-text);
  display: none;
}

.drag-tool-dot-select.cursor-mode-line .drag-tool-icon-select {
  color: var(--dot-color, var(--accent));
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}

.drag-tool-dot-select.cursor-mode-line.active .drag-tool-icon-select {
  color: #ffffff;
}

.drag-tool-dot-select.cursor-mode-line .drag-tool-icon-select-default {
  display: none;
}

.drag-tool-dot-select.cursor-mode-line .drag-tool-icon-select-classic {
  display: block;
}

.drag-tool-dot-select.cursor-mode-line .drag-tool-icon-select path {
  vector-effect: non-scaling-stroke;
}

.drag-tool-icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  font-style: normal;
  font-weight: 450;
  font-feature-settings: normal;
  font-variation-settings: "wdth" 630;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.drag-tool-dot-place .drag-tool-icon-text {
  --tool-icon-offset-x: -0.8px;
  --tool-icon-offset-y: 0.2px;
  width: 23.5px;
  height: 23.5px;
  font-size: 23.5px;
  font-variation-settings: "wdth" 600;
}

.drag-tool-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drag-tool-dot-draw .drag-tool-icon-stroke {
  stroke-width: 2;
}

.drag-tool-icon-draw-grid {
  --tool-icon-mask: var(--svg-tool-connect-grid);
}

.drag-tool-icon-draw-freehand {
  --tool-icon-mask: var(--svg-tool-connect-freehand);
  display: none;
}

.drag-tool-dot-draw.draw-mode-freehand .drag-tool-icon-draw-grid {
  display: none;
}

.drag-tool-dot-draw.draw-mode-freehand .drag-tool-icon-draw-freehand {
  display: block;
}

.drag-tool-icon-text-box {
  --tool-icon-mask: var(--svg-add-text-box);
}

.drag-tool-icon-text-box::before {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
  -webkit-mask: var(--tool-icon-mask) center / contain no-repeat;
  mask: var(--tool-icon-mask) center / contain no-repeat;
}

.drag-tool-dot-draw.draw-mode-freehand .drag-tool-icon-stroke {
  stroke-width: 1.9;
}

.drag-tool-dot-select {
  --dot-color: #555558;
}

.drag-tool-dot-draw {
  --dot-color: var(--connection);
}

.drag-tool-dot-connect {
  --dot-color: var(--connection);
}

.drag-tool-dot-place {
  --dot-color: var(--sketch);
}

.drag-tool-dot-text-box {
  --dot-color: var(--tool-select);
}

body.theme-light .drag-tool-dot-select {
  --dot-color: #555558;
}

body.theme-light .drag-tool-dot-draw {
  --dot-color: var(--connection);
}

body.theme-light .drag-tool-dot-place {
  --dot-color: var(--sketch);
}

body.theme-light .drag-tool-dot-text-box {
  --dot-color: var(--tool-select);
}

body.theme-grey .drag-tool-dot-select {
  --dot-color: #555558;
}

body.theme-grey .drag-tool-dot-draw {
  --dot-color: var(--connection);
}

body.theme-grey .drag-tool-dot-place {
  --dot-color: var(--sketch);
}

body.theme-grey .drag-tool-dot-text-box {
  --dot-color: var(--tool-select);
}

body.theme-dark .drag-tool-dot-select,
body.theme-dim .drag-tool-dot-select {
  --dot-color: #8c8c91;
}

body.theme-blue .drag-tool-dot-select {
  --dot-color: var(--accent);
}

body.theme-blue .drag-tool-dot-select .drag-tool-icon,
body.theme-blue .drag-tool-dot-select.cursor-mode-line .drag-tool-icon-select {
  color: #ffffff;
}

body.theme-dark .drag-tool-dot-text-box,
body.theme-dim .drag-tool-dot-text-box,
body.theme-blue .drag-tool-dot-text-box {
  --dot-color: var(--tool-select);
}

@media (pointer: fine) {
  :root {
    --tool-dot-size: 48px;
    --tool-dot-gap: 8px;
    --tool-dot-pad: 6px;
    --tool-dot-core-size: 11px;
    --tool-dot-hover-size: 14px;
    --tool-dot-active-size: 42px;
    --tool-dot-icon-size: 22px;
    --canvas-control-circle-size: var(--tool-dot-active-size);
  }

  .drag-tool-dot {
    width: var(--tool-dot-size);
    height: var(--tool-dot-size);
  }

  .glyph-editor-launch-button::before {
    inset: -7px;
  }

  .drag-tool-dot::after {
    inset: -7px;
  }

  .drag-tool-icon {
    width: var(--tool-dot-icon-size);
    height: var(--tool-dot-icon-size);
  }

  .drag-tool-icon-select {
    width: 17px;
    height: 17px;
  }

  .drag-tool-icon-text {
    font-size: 18px;
  }

  .drag-tool-dot-place .drag-tool-icon-text {
    --tool-icon-offset-x: -0.6px;
    --tool-icon-offset-y: 0.1px;
    width: 19.5px;
    height: 19.5px;
    font-size: 19.5px;
  }

  .drag-tool-icon-stroke {
    stroke-width: 2.35;
  }

  .drag-tool-dot-draw .drag-tool-icon-stroke {
    stroke-width: 2.05;
  }

  .drag-tool-dot-draw.draw-mode-freehand .drag-tool-icon-stroke {
    stroke-width: 1.9;
  }
}

.grid-element-picker {
  position: fixed;
  left: max(52px, calc(env(safe-area-inset-left) + 52px));
  top: 50%;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: none;
  border-radius: 999px;
  background: var(--ui-surface);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transform: translateY(calc(-50% + 7px));
  transition: opacity 90ms linear, transform 110ms ease;
  --grid-element-indicator-y: 6px;
}

.ui-loading .grid-element-picker {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.ui-loading .grid-element-picker::before,
.ui-loading .grid-element-option {
  opacity: 0;
  transition: none;
}

.grid-element-picker.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: opacity 190ms ease, transform 340ms var(--ui-load-ease-out);
}

.grid-element-picker::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ui-picker-active-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(var(--grid-element-indicator-y) + 3px));
  transition: opacity 80ms linear, transform 100ms ease;
}

.grid-element-picker.visible::before {
  opacity: 1;
  transform: translateY(var(--grid-element-indicator-y));
  transition: opacity 150ms ease, transform 300ms var(--ui-load-ease-out);
}

.grid-element-picker.line-font-picker.no-line-font-selection::before {
  opacity: 0;
  transform: translateY(calc(var(--grid-element-indicator-y) + 3px));
}

.grid-element-option {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
}

.grid-element-picker.visible .grid-element-option {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 190ms ease, transform 320ms var(--ui-load-ease-out);
  transition-delay: var(--context-option-delay, 0ms);
}

.grid-element-option:nth-child(1) {
  --context-option-delay: 40ms;
}

.grid-element-option:nth-child(2) {
  --context-option-delay: 75ms;
}

.grid-element-option:nth-child(3) {
  --context-option-delay: 110ms;
}

.grid-element-option:nth-child(4) {
  --context-option-delay: 145ms;
}

.grid-element-option:nth-child(5) {
  --context-option-delay: 180ms;
}

.grid-element-option:nth-child(6) {
  --context-option-delay: 215ms;
}

.grid-element-option:focus,
.grid-element-option:focus-visible {
  outline: none;
  box-shadow: none;
}

.grid-element-option::before,
.grid-element-option::after {
  content: "";
  position: absolute;
  opacity: 0.82;
  box-sizing: border-box;
}

.grid-element-option:hover,
.grid-element-option.active {
  background: transparent;
}

.grid-element-option-arrow::before {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-58%, -50%);
}

.grid-element-option-arrow::after {
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(-4%, -50%) rotate(45deg);
}

.grid-element-option-circle::before {
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.grid-element-option-rectangle::before {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 8px;
  transform: translate(-50%, -50%);
}

.grid-element-option-diamond::before {
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.grid-element-option-bracket::before {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 2px 0 0 2px;
  transform: translate(-42%, -50%);
}

.grid-element-option-plus::before {
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--svg-add-plus) center / contain no-repeat;
  mask: var(--svg-add-plus) center / contain no-repeat;
  transform: translate(-50%, -50%);
}

.grid-element-option-plus::after {
  display: none;
}

.grid-element-picker.line-font-picker {
  width: 184px;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
  background: var(--ui-surface);
  transform: none;
  transition: opacity 150ms ease;
}

.grid-element-picker.line-font-picker.visible {
  transform: none;
  transition: opacity 180ms ease;
}

.grid-element-picker.line-font-picker::before {
  display: none;
}

.line-font-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.line-font-word-field {
  position: relative;
  width: 100%;
  height: 30px;
  min-width: 0;
  border-radius: 6px;
  background: var(--ui-picker-active-surface);
  overflow: hidden;
}

.line-font-word-selection {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 18px;
  border-radius: 5px;
  background: var(--text-box-selection-bg);
  opacity: 0;
  pointer-events: none;
}

.line-font-word-selection.visible {
  opacity: 1;
}

.line-font-word-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 6px;
  outline: none;
  padding: 0 9px;
  background: transparent;
  color: var(--fg);
  caret-color: var(--line-font-word-caret-color, var(--sketch));
  font: 12px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: clip;
  user-select: text;
  -webkit-user-select: text;
}

.line-font-word-input::selection {
  background: transparent;
  color: var(--text-box-selection-fg);
}

.line-font-editor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 38px;
  border-radius: 6px;
  background: var(--ui-picker-active-surface);
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  font: 11px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.line-font-editor-link:hover,
.line-font-editor-link:focus-visible {
  background: color-mix(in srgb, var(--ui-picker-active-surface) 78%, var(--fg) 22%);
  color: var(--fg);
}

.line-font-editor-link:focus,
.line-font-editor-link:focus-visible {
  outline: none;
  box-shadow: none;
}

body.theme-grey .line-font-word-input,
body.theme-grey .line-font-editor-link {
  background: var(--ui-picker-active-surface);
}

.line-font-glyph-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.line-font-glyph-option {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  font: 11px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  cursor: pointer;
}

.line-font-glyph-option.active,
.line-font-glyph-option.hover-trail,
.line-font-glyph-option:hover {
  background: var(--ui-picker-active-surface);
}

.line-font-glyph-option:disabled {
  opacity: 0.28;
  cursor: default;
}

.line-font-glyph-preview {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 3;
  width: 86px;
  border-radius: 8px;
  padding: 7px;
  background: color-mix(in srgb, var(--glyph-panel-surface) 98%, var(--fg) 2%);
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px) scale(0.98);
  transition:
    opacity 120ms ease,
    transform 160ms var(--ui-load-ease-out);
}

.line-font-glyph-preview.visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
}

.line-font-glyph-preview-canvas {
  display: block;
  width: 72px;
  height: 72px;
}

.arrow-glyph-picker {
  position: fixed;
  z-index: 96;
  width: 218px;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--ui-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px) scale(0.985);
  transition:
    opacity 110ms ease,
    transform 170ms var(--ui-load-ease-out);
  --arrow-glyph-columns: 4;
  --arrow-glyph-active-surface: color-mix(in srgb, var(--ui-surface) 94%, var(--fg) 6%);
}

.arrow-glyph-picker.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.arrow-glyph-grid {
  display: grid;
  grid-template-columns: repeat(var(--arrow-glyph-columns), 1fr);
  gap: 10px;
}

.arrow-glyph-option {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border: none;
  border-radius: 11px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 13.5px;
  font-weight: 500;
  font-variation-settings: "wght" 500, "wdth" 630;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.arrow-glyph-option::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 11px;
  background: transparent;
  transition: background 240ms ease;
}

.arrow-glyph-option.active,
.arrow-glyph-option.hover-trail,
.arrow-glyph-option:hover {
  background: transparent;
}

.arrow-glyph-option.active::before,
.arrow-glyph-option.hover-trail::before,
.arrow-glyph-option:hover::before {
  background: var(--arrow-glyph-active-surface);
}

.arrow-glyph-color-row {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--arrow-glyph-active-surface);
  touch-action: none;
}

.arrow-glyph-color-row .selection-color-option {
  opacity: 1;
  transform: none;
  transition:
    transform 120ms ease,
    opacity 120ms ease;
}

.arrow-glyph-color-row .selection-color-option:hover,
.arrow-glyph-color-row .selection-color-option.synthetic-hover {
  transform: scale(1.08);
}

.arrow-glyph-color-row .selection-color-option[data-selection-color="fg"]::before {
  background: var(--arrow-glyph-active-surface);
  box-shadow: inset 0 0 0 3px var(--fg);
}

.arrow-glyph-color-row .selection-color-option[data-selection-color="fg"].active::before {
  box-shadow:
    inset 0 0 0 3px var(--fg),
    0 0 0 1px var(--arrow-glyph-active-surface),
    0 0 0 3px color-mix(in srgb, var(--fg) 26%, transparent);
}

.arrow-glyph-option:focus,
.arrow-glyph-option:focus-visible {
  outline: none;
  box-shadow: none;
}

.arrow-glyph-preview {
  display: none;
}

.arrow-glyph-preview.visible {
  display: none;
}

@media (hover: none) {
  .line-font-glyph-preview {
    display: none;
  }

  .arrow-glyph-preview {
    display: none;
  }
}

.drop-delete-target {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 34;
  width: var(--canvas-control-circle-size, 42px);
  height: var(--canvas-control-circle-size, 42px);
  border-radius: 999px;
  border: none;
  background: var(--ui-surface);
  display: grid;
  place-items: center;
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 0;
  line-height: 0;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms linear, transform 100ms ease, background 100ms ease,
    border-color 100ms ease, color 100ms ease;
}

.drop-delete-target-icon {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
}

.drop-delete-target-icon::before,
.drop-delete-target-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 6.15px;
  height: 1.7px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.drop-delete-target-icon::before {
  transform: rotate(45deg);
}

.drop-delete-target-icon::after {
  transform: rotate(-45deg);
}

.drop-delete-target.visible {
  opacity: 0.82;
  transition: opacity 180ms ease, transform 360ms var(--ui-load-ease-out),
    background 100ms ease,
    border-color 100ms ease, color 100ms ease;
}

.drop-delete-target.actionable {
  pointer-events: auto;
  cursor: pointer;
}

.drop-delete-target.actionable:hover {
  opacity: 1;
  transform: translateX(-50%) scale(1.04);
}

.drop-delete-target.active {
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
  color: #fff;
  border-color: color-mix(in srgb, #ff5050 82%, #ffffff 18%);
  background: #ff5050;
}

.line-end-picker {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 36;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: none;
  border-radius: 999px;
  background: var(--ui-surface);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transform: translate(-50%, calc(-50% + 7px));
  transition: opacity 90ms linear, transform 110ms ease;
  --context-indicator-x: 5px;
  --context-indicator-width: 28px;
  --context-indicator-height: 24px;
  --context-indicator-y: 5px;
}

.line-end-picker.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 170ms ease, transform 320ms var(--ui-load-ease-out);
}

.line-end-picker::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--context-indicator-y) + 0.5px);
  width: var(--context-indicator-width);
  height: calc(var(--context-indicator-height) - 1px);
  border-radius: 999px;
  background: var(--ui-picker-active-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--context-indicator-x));
  transition: opacity 80ms linear, transform 100ms ease;
}

.line-end-picker.visible::before {
  opacity: 1;
  transform: translateX(var(--context-indicator-x));
  transition: opacity 140ms ease, transform 280ms var(--ui-load-ease-out);
}

.line-end-picker::after {
  content: attr(data-line-mode-label);
  position: absolute;
  left: 50%;
  top: -22px;
  padding: 2px 7px 5px;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font: 10px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 90ms ease-out, transform 0ms linear 90ms;
  white-space: nowrap;
}

.line-end-picker.line-mode-dragging::after,
.line-end-picker.pill-end-dragging::after,
.line-end-picker.text-marker-dragging::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 110ms ease, transform 170ms var(--ui-load-ease-out);
}

.line-end-divider {
  align-self: center;
  width: 1px;
  height: 15px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.16;
}

.line-end-option,
.shape-option,
.add-option {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
}

.line-end-picker.visible .line-end-option,
.line-end-picker.visible .shape-option,
.line-end-picker.visible .add-option {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 170ms ease, transform 300ms var(--ui-load-ease-out);
  transition-delay: var(--context-option-delay, 0ms);
}

.line-end-picker:not(.visible) .line-end-option,
.line-end-picker:not(.visible) .shape-option,
.line-end-picker:not(.visible) .add-option {
  transition-delay: 0ms;
}

.line-end-option:nth-child(1),
.shape-option:nth-child(1),
.add-option:nth-child(1) {
  --context-option-delay: 30ms;
}

.line-end-option:nth-child(2),
.shape-option:nth-child(2),
.add-option:nth-child(2) {
  --context-option-delay: 60ms;
}

.line-end-option:nth-child(3),
.shape-option:nth-child(3),
.add-option:nth-child(3) {
  --context-option-delay: 90ms;
}

.line-end-option:nth-child(4),
.shape-option:nth-child(4),
.add-option:nth-child(4) {
  --context-option-delay: 120ms;
}

.line-end-option:nth-child(5),
.shape-option:nth-child(5) {
  --context-option-delay: 150ms;
}

.line-end-option:nth-child(6),
.shape-option:nth-child(6) {
  --context-option-delay: 180ms;
}

.line-end-option:nth-child(7),
.shape-option:nth-child(7) {
  --context-option-delay: 210ms;
}

.line-end-option:nth-child(8) {
  --context-option-delay: 240ms;
}

.line-end-option:nth-child(9) {
  --context-option-delay: 270ms;
}

.line-end-option:focus,
.line-end-option:focus-visible,
.shape-option:focus,
.shape-option:focus-visible,
.add-option:focus,
.add-option:focus-visible {
  outline: none;
  box-shadow: none;
}

.line-end-option.active,
.line-end-option.keyboard-focused,
.line-end-option:hover,
.line-end-option.mode-dragging,
.shape-option.active,
.shape-option.keyboard-focused,
.shape-option:hover,
.add-option.active,
.add-option.keyboard-focused,
.add-option:hover {
  background: transparent;
}

.line-end-option.mode-dragging {
  background: var(--ui-picker-active-surface);
  transform: translateY(0) scale(1.08);
}

.shape-option.pill-end-dragging {
  background: var(--ui-picker-active-surface);
  transform: translateY(0) scale(1.08);
}

.line-end-option::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 7px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.78;
}

.line-end-option.mode-dragging:not(.line-end-option-arrow):not(.line-text-marker-option)::before {
  display: block;
  opacity: 1;
}

.line-end-option.mode-dragging::after {
  opacity: 1;
}

/*
 * Line mode drag icons are parked with the line-mode picker feature.
.line-end-option.mode-dragging[data-line-mode-preview="bezier"]::before {
  left: 5px;
  right: 5px;
  top: 50%;
  height: 12px;
  border-radius: 0;
  background: currentColor;
  transform: translateY(-50%);
  -webkit-mask: var(--svg-line-mode-bezier) center / contain no-repeat;
  mask: var(--svg-line-mode-bezier) center / contain no-repeat;
}

.line-end-option.mode-dragging[data-line-mode-preview="straight"]::before {
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2.5px;
  transform: translateY(-50%) rotate(-18deg);
}

.line-end-option.mode-dragging[data-line-mode-preview="path"]::before {
  left: 5px;
  right: 5px;
  top: 50%;
  height: 12px;
  border-radius: 0;
  background: currentColor;
  transform: translateY(-50%);
  -webkit-mask: var(--svg-line-mode-path) center / contain no-repeat;
  mask: var(--svg-line-mode-path) center / contain no-repeat;
}
*/

.line-end-option-end::before,
.line-end-option-dot::before {
  left: 6px;
  right: 9px;
}

.line-end-option-end::after,
.line-end-option-dot::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.line-end-option-end[data-line-end-preview="arrow"]::before {
  display: none;
}

.line-end-option-end[data-line-end-preview="arrow"]::after {
  --line-end-arrow-mask: var(--svg-line-end-arrow-default);
  left: 3px;
  right: auto;
  width: 20px;
  height: 16px;
  border-radius: 0;
  background: currentColor;
  opacity: 0.78;
  -webkit-mask: var(--line-end-arrow-mask) center / contain no-repeat;
  mask: var(--line-end-arrow-mask) center / contain no-repeat;
}

.line-end-option-end[data-line-end-preview="dot"][data-line-end-variant-preview="square"]::after {
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.line-end-option-end[data-line-end-preview="dot"][data-line-end-variant-preview="dot-round"]::after {
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.line-end-option-dot[data-line-end-variant-preview="none"]::after {
  display: none;
}

.line-end-option-dot[data-line-end-variant-preview^="square"]::after {
  border-radius: 2px;
}

.line-end-option-dot[data-line-end-variant-preview$="small"]::after {
  right: 6px;
  width: 5px;
  height: 5px;
}

.line-end-option-dot[data-line-end-variant-preview$="large"]::after {
  right: 3px;
  width: 11px;
  height: 11px;
}

.line-end-option-dot[data-line-end-variant-preview="square-large"]::after {
  right: 4px;
}

.line-end-option-arrow::after {
  --line-end-arrow-mask: var(--svg-line-end-arrow-default);
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 20px;
  height: 16px;
  border: 0;
  background: currentColor;
  opacity: 0.78;
  transform: translateY(-50%);
  -webkit-mask: var(--line-end-arrow-mask) center / contain no-repeat;
  mask: var(--line-end-arrow-mask) center / contain no-repeat;
}

.line-end-option-arrow[data-line-end-variant-preview="none"]::after {
  display: none;
}

.line-end-option-arrow[data-line-end-variant-preview="arrow-open"]::after {
  --line-end-arrow-mask: var(--svg-line-end-arrow-open);
  left: 2px;
  width: 23px;
}

.line-end-option-arrow[data-line-end-variant-preview="arrow-slim"]::after {
  --line-end-arrow-mask: var(--svg-line-end-arrow-slim);
  left: 2px;
  width: 23px;
}

.line-end-option-arrow::before {
  display: none;
}

.line-text-marker-option::before {
  content: none;
  display: none;
  opacity: 0;
}

.line-text-marker-option.mode-dragging {
  background: var(--ui-picker-active-surface);
  transform: translateY(0);
}

.line-text-marker-option.keyboard-focused,
.line-text-marker-option:hover,
.line-text-marker-option.mode-dragging {
  background: var(--ui-picker-active-surface);
}

.line-text-marker-option::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 17px;
  z-index: 1;
  background: currentColor;
  opacity: 0.62;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
}

.line-text-marker-option.active::after,
.line-text-marker-option.keyboard-focused::after,
.line-text-marker-option.mode-dragging::after {
  opacity: 0.9;
}

.line-text-marker-option-default::after {
  -webkit-mask: var(--svg-text-marker-corners) center / contain no-repeat;
  mask: var(--svg-text-marker-corners) center / contain no-repeat;
}

.line-text-marker-option[data-text-marker-preview="default"]::after {
  -webkit-mask: var(--svg-text-marker-corners) center / contain no-repeat;
  mask: var(--svg-text-marker-corners) center / contain no-repeat;
}

.line-text-marker-option-round::after {
  -webkit-mask: var(--svg-text-marker-round-brackets) center / contain no-repeat;
  mask: var(--svg-text-marker-round-brackets) center / contain no-repeat;
}

.line-text-marker-option[data-text-marker-preview="round"]::after {
  -webkit-mask: var(--svg-text-marker-round-brackets) center / contain no-repeat;
  mask: var(--svg-text-marker-round-brackets) center / contain no-repeat;
}

.line-text-marker-option-angle::after {
  -webkit-mask: var(--svg-text-marker-angle-brackets) center / contain no-repeat;
  mask: var(--svg-text-marker-angle-brackets) center / contain no-repeat;
}

.line-text-marker-option[data-text-marker-preview="angle"]::after {
  -webkit-mask: var(--svg-text-marker-angle-brackets) center / contain no-repeat;
  mask: var(--svg-text-marker-angle-brackets) center / contain no-repeat;
}

.line-text-marker-option {
  overflow: hidden;
  isolation: isolate;
}

.line-text-marker-divider {
  position: relative;
  z-index: 2;
}

.shape-option::before {
  content: "";
  position: absolute;
  inset: 6px 7px;
  border: 2px solid currentColor;
  opacity: 0.78;
}

.shape-option-path::before {
  inset: 5px 7px 6px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 8px 0;
}

.shape-option-rectangle::before {
  border-radius: 3px;
}

.shape-option-text-pill::before {
  inset: 5px 4px;
  border-radius: 999px;
}

.shape-option-text-pill::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  transform: translateY(-50%);
}

.shape-option-pill-outline::before {
  inset: 5px 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.shape-option-pill-outline::after {
  opacity: 0;
}

.shape-option-pill-double::before {
  inset: 3px 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.shape-option-pill-double::after {
  left: 9px;
  right: 9px;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  transform: translateY(-50%);
}

.line-cross-pill-color-option::before {
  inset: auto;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 999px;
  background: var(--line-cross-pill-color, var(--connection));
  opacity: 1;
  transform: translate(-50%, -50%);
}

.line-cross-pill-color-option::after {
  display: none;
}

.line-cross-pill-color-option.color-dragging::before {
  transform: translate(-50%, -50%) scale(1.12);
}

.shape-option-text-frame-outline::before,
.shape-option-text-frame-fill::before {
  inset: 5px 5px;
  border-radius: 999px;
}

.shape-option-text-frame-outline::after,
.shape-option-text-frame-fill::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.78;
  transform: translateY(-50%);
}

.shape-option-text-frame-fill::before {
  background: currentColor;
}

.shape-option-text-frame-fill::after {
  background: var(--bg);
  opacity: 1;
}

.canvas-list-type-picker {
  z-index: 44;
}

.canvas-list-type-option::before,
.canvas-list-type-option::after {
  content: "";
  position: absolute;
  opacity: 0.84;
  pointer-events: none;
}

.canvas-list-type-option::before {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.canvas-list-type-open::before {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  background: var(--ui-surface);
}

.canvas-list-type-done::before {
  width: 11px;
  height: 11px;
  background: currentColor;
  opacity: 0.52;
}

.canvas-list-type-done::after {
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%) rotate(-12deg);
}

.canvas-list-type-next::before {
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--svg-list-next) center / contain no-repeat;
  mask: var(--svg-list-next) center / contain no-repeat;
}

.canvas-list-type-next::after {
  display: none;
}

.add-picker {
  --side-add-picker-size: 158px;
  --side-add-button-right: max(20px, env(safe-area-inset-right));
  --side-add-picker-offset: -38px;
  left: auto;
  right: calc(var(--side-add-button-right) + var(--side-add-picker-offset));
  top: 50%;
  width: var(--side-add-picker-size);
  height: var(--side-add-picker-size);
  z-index: 25;
  display: block;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  transform: translate(0, -50%);
  transition: opacity 120ms ease 300ms;
}

.add-picker.visible {
  opacity: 1;
  pointer-events: none;
  transform: translate(0, -50%);
  transition: opacity 160ms ease;
}

.add-picker::before {
  display: none;
}

.add-picker .add-option {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--canvas-control-circle-size, 42px);
  height: var(--canvas-control-circle-size, 42px);
  background: var(--ui-surface);
  color: var(--fg);
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--add-option-x) * 0.34),
      calc(var(--add-option-y) * 0.34)
    )
    scale(0.74);
  transition:
    opacity 240ms ease,
    transform 520ms cubic-bezier(0.2, 0.82, 0.22, 1),
    background-color 140ms ease,
    box-shadow 140ms ease;
  transition-delay: var(--add-option-exit-delay, 0ms);
  backface-visibility: hidden;
  box-shadow: 0 0 0 0 transparent;
}

body.theme-light .add-picker .add-option:not(.active):not(.keyboard-focused):not(:hover),
body.theme-light .command-add-picker .add-option:not(.active):not(.keyboard-focused):not(:hover) {
  background: var(--ui-surface);
}

.add-picker.visible .add-option {
  transform:
    translate(-50%, -50%)
    translate(var(--add-option-x), var(--add-option-y))
    scale(1);
  transition-duration: 430ms, 430ms, 140ms;
  transition-timing-function:
    ease,
    cubic-bezier(0.18, 1.35, 0.26, 1),
    ease;
  transition-delay: var(--context-option-delay, 0ms);
}

.add-picker .add-option.keyboard-focused,
.add-picker .add-option:hover {
  background: var(--ui-picker-active-surface);
  box-shadow: 0 0 0 1px var(--ui-active-outline);
}

body.theme-light .add-picker .add-option.keyboard-focused,
body.theme-light .add-picker .add-option:hover {
  background: var(--ui-active-surface);
}

body.theme-dark .add-picker .add-option,
body.theme-dark .command-add-picker .add-option {
  background: color-mix(in srgb, var(--ui-surface) 82%, #ffffff 18%);
}

body.theme-dark .add-picker .add-option.keyboard-focused,
body.theme-dark .add-picker .add-option:hover,
body.theme-dark .command-add-picker .add-option.active,
body.theme-dark .command-add-picker .add-option.keyboard-focused,
body.theme-dark .command-add-picker .add-option:hover {
  background: color-mix(in srgb, var(--ui-surface) 68%, #ffffff 32%);
}

.add-picker .add-option.confirm-pressed {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
}

.add-picker .add-option.confirm-burst {
  color: #ffffff;
}

body.theme-light .add-picker .add-option.confirm-pressed,
body.theme-light .add-picker .add-option.confirm-burst {
  background: var(--ui-active-surface);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--ui-active-outline);
}

body.theme-dark .add-picker .add-option.confirm-pressed,
body.theme-dark .add-picker .add-option.confirm-burst {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
}

.add-picker.visible .add-option.keyboard-focused,
.add-picker.visible .add-option:hover {
  transform:
    translate(-50%, -50%)
    translate(var(--add-option-x), var(--add-option-y))
    scale(1.08);
  transition-duration: 160ms, 160ms, 140ms;
  transition-timing-function:
    ease,
    var(--ui-load-ease-out),
    ease;
  transition-delay: 0ms;
}

.add-picker.visible .add-option.keyboard-focused.confirm-pressed {
  transform:
    translate(-50%, -50%)
    translate(var(--add-option-x), var(--add-option-y))
    scale(1.1);
  transition-delay: 0ms;
}

.add-picker.visible .add-option.confirm-pressed {
  transform:
    translate(-50%, -50%)
    translate(var(--add-option-x), var(--add-option-y))
    scale(1.04);
}

.add-picker.visible .add-option.confirm-burst {
  animation: add-option-confirm-burst 340ms var(--ui-load-ease-out);
}

.add-picker.visible .add-option.boundary-wiggle-up {
  animation: add-option-boundary-wiggle-up 190ms ease;
}

.add-picker.visible .add-option.boundary-wiggle-down {
  animation: add-option-boundary-wiggle-down 190ms ease;
}

@keyframes add-option-boundary-wiggle-up {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), var(--add-option-y))
      scale(1.08);
  }
  32% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), calc(var(--add-option-y) - 5px))
      scale(1.08);
  }
  68% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), calc(var(--add-option-y) + 2px))
      scale(1.08);
  }
}

@keyframes add-option-boundary-wiggle-down {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), var(--add-option-y))
      scale(1.08);
  }
  32% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), calc(var(--add-option-y) + 5px))
      scale(1.08);
  }
  68% {
    transform:
      translate(-50%, -50%)
      translate(var(--add-option-x), calc(var(--add-option-y) - 2px))
      scale(1.08);
  }
}

@keyframes add-option-confirm-burst {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 76%, transparent);
  }
  55% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  100% {
    box-shadow: 0 0 0 13px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.add-picker .add-option-image {
  --add-option-x: -78px;
  --add-option-y: -64px;
  --add-option-exit-delay: 90ms;
}

.add-picker .add-option-list {
  --add-option-x: -105px;
  --add-option-y: -20px;
  --add-option-exit-delay: 60ms;
}

.add-picker .add-option-text-box {
  --add-option-x: -105px;
  --add-option-y: 31px;
  --add-option-exit-delay: 30ms;
}

.add-picker .add-option-pill {
  --add-option-x: -76px;
  --add-option-y: 74px;
  --add-option-exit-delay: 0ms;
}

.add-option::before,
.add-option::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(var(--add-option-icon-scale, 1));
}

.add-option-image::before,
.add-option-list::before,
.add-option-text-box::before,
.add-option-pill::before {
  border: none;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--add-option-mask) center / contain no-repeat;
  mask: var(--add-option-mask) center / contain no-repeat;
}

.add-option-image::before {
  --add-option-mask: var(--svg-add-image);
  width: 16px;
  height: 14px;
}

.add-option-list::before {
  --add-option-mask: var(--svg-add-list);
  width: 16px;
  height: 16px;
}

.add-option-text-box::before {
  --add-option-mask: var(--svg-add-text-box);
  width: 17px;
  height: 17px;
}

.add-option-pill::before {
  --add-option-mask: var(--svg-add-pill);
  width: 17px;
  height: 17px;
}

.add-option-image::after,
.add-option-list::after,
.add-option-text-box::after,
.add-option-pill::after {
  display: none;
}

.command-add-picker {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  z-index: 46;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  --command-add-radius: 54px;
  --command-add-option-size: 36px;
  --command-add-icon-scale: 1;
  --command-tooltip-gap: 8.5px;
}

.command-add-picker.visible {
  opacity: 1;
}

.command-add-picker .add-option {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--command-add-option-size);
  height: var(--command-add-option-size);
  background: var(--ui-surface);
  color: var(--fg);
  opacity: 0;
  pointer-events: auto;
  --add-option-icon-scale: var(--command-add-icon-scale);
  transform:
    translate(-50%, -50%)
    translate(
      calc(var(--command-add-x) * 0.42),
      calc(var(--command-add-y) * 0.42)
    )
    scale(0.74);
  transition:
    opacity 150ms ease,
    transform 360ms cubic-bezier(0.18, 1.35, 0.26, 1),
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
  transition-delay: 0ms;
  will-change: transform;
  box-shadow: 0 0 0 0 transparent;
}

.command-add-picker.visible .add-option {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate(var(--command-add-x), var(--command-add-y))
    scale(1);
  transition-delay: calc(92ms + var(--command-option-delay, 0ms));
}

.command-add-picker .add-option-text-box {
  --command-add-x: 0px;
  --command-add-y: calc(var(--command-add-radius) * -1);
  --command-option-delay: 0ms;
}

.command-add-picker .add-option-pill {
  --command-add-x: var(--command-add-radius);
  --command-add-y: 0px;
  --command-option-delay: 22ms;
}

.command-add-picker .add-option-list {
  --command-add-x: 0px;
  --command-add-y: var(--command-add-radius);
  --command-option-delay: 44ms;
}

.command-add-picker .add-option-image {
  --command-add-x: calc(var(--command-add-radius) * -1);
  --command-add-y: 0px;
  --command-option-delay: 66ms;
}

.command-add-picker .command-add-tooltip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  box-sizing: border-box;
  padding: 1px 7px 0;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font: 10px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: var(--command-tooltip-rest-transform, translate(-50%, -50%) scale(0.96));
  transition:
    opacity 90ms ease,
    transform 150ms var(--ui-load-ease-out);
}

.command-add-picker .add-option-text-box .command-add-tooltip {
  top: auto;
  bottom: calc(100% + var(--command-tooltip-gap));
  --command-tooltip-rest-transform: translate(-50%, 2px) scale(0.96);
  --command-tooltip-active-transform: translate(-50%, 0) scale(1);
}

.command-add-picker .add-option-pill .command-add-tooltip {
  left: calc(100% + var(--command-tooltip-gap));
  --command-tooltip-rest-transform: translate(-2px, -50%) scale(0.96);
  --command-tooltip-active-transform: translate(0, -50%) scale(1);
}

.command-add-picker .add-option-list .command-add-tooltip {
  top: calc(100% + var(--command-tooltip-gap));
  --command-tooltip-rest-transform: translate(-50%, -2px) scale(0.96);
  --command-tooltip-active-transform: translate(-50%, 0) scale(1);
}

.command-add-picker .add-option-image .command-add-tooltip {
  left: auto;
  right: calc(100% + var(--command-tooltip-gap));
  --command-tooltip-rest-transform: translate(2px, -50%) scale(0.96);
  --command-tooltip-active-transform: translate(0, -50%) scale(1);
}

.command-add-picker.visible .add-option:hover .command-add-tooltip {
  opacity: 1;
  transform: var(--command-tooltip-active-transform, translate(-50%, -50%) scale(1));
}

body.ipad-like-platform .command-add-picker .command-add-tooltip {
  display: none;
}

@media (hover: none) {
  .command-add-picker .command-add-tooltip {
    display: none;
  }
}

.command-add-picker.visible .add-option.keyboard-focused,
.command-add-picker.visible .add-option:hover {
  transition:
    opacity 120ms ease,
    transform 150ms cubic-bezier(0.2, 0, 0.16, 1),
    background-color 120ms ease,
    color 120ms ease;
  transition-delay: 0ms;
}

.command-add-picker .add-option.active,
.command-add-picker .add-option.keyboard-focused,
.command-add-picker .add-option:hover {
  background: var(--ui-picker-active-surface);
  box-shadow: 0 0 0 1px var(--ui-active-outline);
  transform:
    translate(-50%, -50%)
    translate(var(--command-add-x), var(--command-add-y))
    scale(1.08);
}

body.theme-light .command-add-picker .add-option.active,
body.theme-light .command-add-picker .add-option.keyboard-focused,
body.theme-light .command-add-picker .add-option:hover {
  background: var(--ui-active-surface);
}

.command-add-picker .add-option.confirm-pressed {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
  transform:
    translate(-50%, -50%)
    translate(var(--command-add-x), var(--command-add-y))
    scale(1.1);
}

.command-add-picker .add-option.confirm-burst {
  color: #ffffff;
}

body.theme-light .command-add-picker .add-option.confirm-pressed,
body.theme-light .command-add-picker .add-option.confirm-burst {
  background: var(--ui-active-surface);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--ui-active-outline);
}

body.theme-dark .command-add-picker .add-option.confirm-pressed,
body.theme-dark .command-add-picker .add-option.confirm-burst {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 72%, transparent);
}

.command-add-picker.visible .add-option.confirm-burst {
  animation: add-option-confirm-burst 340ms var(--ui-load-ease-out);
}

.selection-color-picker {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 98;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: none;
  border-radius: 999px;
  background: var(--ui-surface);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  cursor: pointer;
  transform: translate(-50%, calc(-50% + 7px));
  transition: opacity 90ms linear, transform 110ms ease;
}

.selection-color-picker,
.selection-color-picker * {
  cursor: pointer !important;
}

.selection-color-picker::after {
  content: attr(data-pill-end-label);
  position: absolute;
  left: 50%;
  top: -22px;
  padding: 3px 7px 4px;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font: 10px/1 "geogeo-Regular", "SF Mono", "Menlo", monospace;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 90ms ease-out, transform 0ms linear 90ms;
  white-space: nowrap;
}

.selection-color-picker.pill-end-dragging::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 110ms ease, transform 170ms var(--ui-load-ease-out);
}

.selection-color-picker.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 190ms ease, transform 340ms var(--ui-load-ease-out);
}

.selection-color-picker.next-only .selection-structure-toggle {
  display: none;
}

.selection-color-picker.next-only .selection-text-scale-option {
  display: none;
}

.selection-color-option {
  position: relative;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
}

.selection-color-picker.visible .selection-color-option,
.selection-color-picker.visible .selection-structure-toggle,
.selection-color-picker.visible .selection-text-scale-option,
.selection-color-picker.visible .selection-weight-divider,
.selection-color-picker.visible .selection-bold-option {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 320ms var(--ui-load-ease-out);
  transition-delay: var(--context-option-delay, 0ms);
}

.line-end-color-divider {
  order: 19;
}

.line-end-color-option {
  order: 20 !important;
  flex: 0 0 22px;
  align-self: center;
}

.line-end-weight-divider {
  order: 21 !important;
  flex: 0 0 1px;
  margin: 0 1px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
}

.line-end-text-weight-option {
  order: 22 !important;
  flex: 0 0 22px;
  align-self: center;
}

.line-end-picker.visible .line-end-color-option,
.line-end-picker.visible .line-end-weight-divider,
.line-end-picker.visible .line-end-text-weight-option {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 320ms var(--ui-load-ease-out);
  transition-delay: var(--context-option-delay, 0ms);
}

.line-end-picker.visible .line-end-weight-divider,
.selection-color-picker.visible .selection-weight-divider {
  opacity: 0.16;
}

.line-end-picker:not(.visible) .line-end-color-option,
.line-end-picker:not(.visible) .line-end-weight-divider,
.line-end-picker:not(.visible) .line-end-text-weight-option {
  transition-delay: 0ms;
}

.line-end-picker.visible .line-end-color-option:hover,
.line-end-picker.visible .line-end-color-option.synthetic-hover,
.line-end-picker.visible .line-end-text-weight-option:hover,
.line-end-picker.visible .line-end-text-weight-option.synthetic-hover {
  transform: translateY(0) scale(1.08);
  transition-delay: 0ms;
}

.selection-color-picker:not(.visible) .selection-color-option,
.selection-color-picker:not(.visible) .selection-structure-toggle,
.selection-color-picker:not(.visible) .selection-text-scale-option,
.selection-color-picker:not(.visible) .selection-weight-divider,
.selection-color-picker:not(.visible) .selection-bold-option {
  transition-delay: 0ms, 0ms, 0ms, 0ms;
}

.selection-color-option:nth-child(1) {
  --context-option-delay: 34ms;
}

.selection-color-option:nth-child(2) {
  --context-option-delay: 68ms;
}

.selection-color-option:nth-child(3) {
  --context-option-delay: 102ms;
}

.selection-color-option:nth-child(4) {
  --context-option-delay: 136ms;
}

.selection-color-option:nth-child(5) {
  --context-option-delay: 170ms;
}

.selection-color-option:focus,
.selection-color-option:focus-visible {
  outline: none;
  box-shadow: none;
}

.selection-color-option::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--selection-swatch-preview, var(--selection-swatch, var(--fg)));
  opacity: var(--selection-opacity-preview, 1);
  box-shadow: none;
  transform: scale(1);
  transition: inset 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.selection-color-option.active::before {
  inset: 3px;
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 3px color-mix(in srgb, var(--selection-swatch, var(--fg)) 34%, transparent);
}

.selection-color-picker.visible .selection-color-option:hover,
.selection-color-picker.visible .selection-color-option.synthetic-hover {
  transform: translateY(0) scale(1.08);
  transition-delay: 0ms;
}

.selection-color-option:not(.active):not(.next-active):hover::before,
.selection-color-option:not(.active):not(.next-active).synthetic-hover::before {
  inset: 3px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--bg) 92%, transparent),
    0 0 0 3px color-mix(in srgb, var(--selection-swatch, var(--fg)) 34%, transparent);
}

.selection-color-option.keyboard-focused::before {
  transform: scale(1.22);
}

.selection-color-option.next-active::before {
  inset: 3px;
  box-shadow:
    0 0 0 1px var(--bg),
    0 0 0 3px color-mix(in srgb, var(--selection-swatch, var(--fg)) 92%, transparent);
}

.selection-color-option[data-selection-color="fg"] {
  --selection-swatch: var(--fg);
}

.selection-color-option[data-selection-color="connection"] {
  --selection-swatch: var(--connection);
}

.selection-color-option[data-selection-color="accent"] {
  --selection-swatch: var(--selection-accent);
}

.selection-color-option[data-selection-color="extra"] {
  --selection-swatch: var(--selection-extra);
}

.selection-color-option[data-selection-color="sketch"] {
  --selection-swatch: var(--sketch);
}

body:not(.theme-blue) .selection-color-option[data-selection-color="sketch"],
body.theme-blue .selection-color-option[data-selection-color="sketch"] {
  order: -4;
  --context-option-delay: 34ms;
}

body:not(.theme-blue) .selection-color-option[data-selection-color="connection"],
body.theme-blue .selection-color-option[data-selection-color="accent"] {
  order: -3;
  --context-option-delay: 68ms;
}

body:not(.theme-blue) .selection-color-option[data-selection-color="extra"],
body.theme-blue .selection-color-option[data-selection-color="connection"] {
  order: -2;
  --context-option-delay: 102ms;
}

body:not(.theme-blue) .selection-color-option[data-selection-color="accent"],
body.theme-blue .selection-color-option[data-selection-color="extra"] {
  order: -1;
  --context-option-delay: 136ms;
}

.selection-structure-toggle {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(6px) scale(0.84);
  transition: opacity 80ms linear, transform 100ms ease,
    background 110ms ease, border-color 110ms ease;
  transition-delay: 0ms, 0ms, 0ms, 0ms;
}

.selection-structure-toggle {
  --context-option-delay: 170ms;
}

.selection-weight-divider {
  flex: 0 0 1px;
  margin: 0 1px;
  color: var(--fg);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
  --context-option-delay: 204ms;
}

body.theme-blue .selection-pill-toggle {
  color: var(--fg);
}

body.theme-dark .selection-pill-toggle,
body.theme-dim .selection-pill-toggle {
  color: var(--fg);
}

.selection-text-scale-option {
  --scale-icon-stroke: 2px;
  --scale-icon-size: 14px;
  --scale-icon-mark-mask: none;
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(6px) scale(0.84);
  transition: opacity 80ms linear, transform 100ms ease,
    background 110ms ease, color 110ms ease;
  transition-delay: 0ms, 0ms, 0ms, 0ms;
}

.selection-text-scale-option:nth-of-type(7) {
  --context-option-delay: 238ms;
}

.selection-structure-toggle:focus,
.selection-structure-toggle:focus-visible,
.selection-bold-option:focus,
.selection-bold-option:focus-visible,
.selection-text-scale-option:focus,
.selection-text-scale-option:focus-visible {
  outline: none;
  box-shadow: none;
}

.selection-bold-option {
  --context-option-delay: 238ms;
  --bold-icon-stroke-width: 1.56px;
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 80ms linear, transform 100ms ease;
  transition-delay: 0ms;
}

.selection-bold-option::before {
  content: "";
  position: absolute;
  inset: 4px;
  box-sizing: border-box;
  border: var(--bold-icon-stroke-width) solid currentColor;
  border-radius: 999px;
  background: transparent;
  transform: scale(1);
  transition: border-width 80ms linear, transform 120ms ease;
}

.selection-bold-option.active {
  --bold-icon-stroke-width: 2.13px;
}

.selection-bold-option.next-active {
  background: transparent;
}

.selection-bold-option.active::before,
.selection-bold-option.next-active::before,
.selection-color-picker.visible .selection-bold-option:hover::before,
.selection-color-picker.visible .selection-bold-option.synthetic-hover::before,
.line-end-picker.visible .line-end-text-weight-option:hover::before,
.line-end-picker.visible .line-end-text-weight-option.synthetic-hover::before {
  transform: scale(1.08);
}

.selection-bold-option.weight-dragging::before {
  transition: transform 90ms ease, border-width 0ms linear;
}

.selection-structure-toggle::before {
  content: "";
  position: absolute;
  opacity: 1;
  transition: opacity 130ms ease, transform 130ms ease;
}

.selection-pill-toggle::before {
  inset: 5px 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.selection-pill-toggle::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 1;
  transform: translateY(-50%);
}

.selection-pill-toggle.shape-option-pill-outline::before {
  inset: 5px 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.selection-pill-toggle.shape-option-pill-outline::after {
  opacity: 0;
}

.selection-pill-toggle.shape-option-pill-double::before {
  inset: 3px 4px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}

.selection-pill-toggle.shape-option-pill-double::after {
  left: 9px;
  right: 9px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 1;
}

.selection-pill-toggle.pill-end-dragging {
  background: var(--ui-picker-active-surface);
  transition-delay: 0ms;
}

.selection-color-picker.visible .selection-pill-toggle.pill-end-dragging {
  transform: translateY(0) scale(1.08);
}

.selection-structure-toggle::after {
  display: block;
}

.selection-structure-toggle.active {
  background: transparent;
}

.selection-structure-toggle.active::before,
.selection-structure-toggle.active::after {
  transform: scale(1.08);
}

.selection-pill-toggle.active::before {
  transform: scale(1.08);
}

.selection-pill-toggle.active::after,
.selection-pill-toggle.pill-end-dragging::after {
  transform: translateY(-50%) scale(1.08);
}

.selection-structure-toggle.active::before {
  opacity: 1;
}

.selection-text-scale-option::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--scale-icon-size, 13px);
  height: var(--scale-icon-size, 13px);
  box-sizing: border-box;
  border: var(--scale-icon-stroke, 2px) solid currentColor;
  border-radius: 4px;
  background: transparent;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 130ms ease, transform 130ms ease, width 130ms ease,
    height 130ms ease;
}

.selection-text-scale-option::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  width: 8px;
  height: 8px;
  background: currentColor;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 130ms ease;
  -webkit-mask: var(--scale-icon-mark-mask) center / contain no-repeat;
  mask: var(--scale-icon-mark-mask) center / contain no-repeat;
}

.selection-text-scale-option[data-text-scale-preview="1x1"] {
  --scale-icon-mark-mask: none;
}

.selection-text-scale-option[data-text-scale-preview="3x2"] {
  --scale-icon-mark-mask: var(--svg-text-scale-diagonal);
}

.selection-text-scale-option[data-text-scale-preview="4x3"] {
  --scale-icon-mark-mask: var(--svg-text-scale-cross);
}

.selection-text-scale-option[data-text-scale-preview="3x2"]::after,
.selection-text-scale-option[data-text-scale-preview="4x3"]::after {
  display: block;
}

.selection-text-scale-option.active::before,
.selection-text-scale-option:hover::before,
.selection-text-scale-option.synthetic-hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.selection-text-scale-option.active::after,
.selection-text-scale-option:hover::after,
.selection-text-scale-option.synthetic-hover::after {
  opacity: 1;
}

.selection-text-scale-option.active {
  color: #000;
}

.selection-structure-toggle:disabled {
  cursor: default;
  opacity: 0.28;
}

/* Image canvas feature: remove/comment this section with the matching HTML block and app.js flag to disable. */
.image-upload-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 28;
  width: var(--canvas-control-circle-size, 42px);
  height: var(--canvas-control-circle-size, 42px);
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--ui-surface);
  color: var(--fg);
  display: grid;
  place-items: center;
  opacity: 0.68;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition:
    opacity 130ms ease,
    transform 150ms var(--ui-load-ease-out),
    background 120ms ease,
    color 120ms ease;
}

.ui-loading .image-upload-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 15px)) scale(0.86);
  transition-delay: 0ms;
}

.image-upload-button::before {
  content: "";
  position: absolute;
  inset: -21px;
  border-radius: 999px;
}

.image-upload-button span {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  transform: none;
  font-size: 0;
  line-height: 0;
  transition: transform 180ms var(--ui-load-ease-out);
}

.image-upload-button span::before,
.image-upload-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.45px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.image-upload-button span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (pointer: fine) {
  .image-upload-button::before {
    inset: -9px;
  }
}

.image-upload-button:hover,
.image-upload-button:focus-visible,
.image-upload-button.open {
  opacity: 0.98;
  transform: translateY(-50%);
  transition-delay: 0ms;
}

.image-upload-button.confirm-pressed {
  transform: translateY(-50%) scale(0.92);
}

.image-upload-button.confirm-burst {
  animation: add-button-confirm-burst 340ms var(--ui-load-ease-out);
}

.image-upload-button.open span {
  transform: rotate(45deg);
}

@keyframes add-button-confirm-burst {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--accent) 76%, transparent),
      0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent);
  }
  55% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--accent) 34%, transparent),
      0 0 0 13px color-mix(in srgb, var(--accent) 13%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent),
      0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.image-upload-button:focus,
.image-upload-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.image-upload-button.pending {
  opacity: 0.98;
  background: var(--ui-surface);
  color: var(--fg);
}

.image-upload-button.hidden-for-now {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.add-picker.launcher-hidden {
  display: none !important;
}

body.theme-grey .image-upload-button,
body.theme-grey .image-upload-button.pending {
  background: var(--ui-surface);
  color: color-mix(in srgb, var(--fg) 66%, transparent);
}

body.theme-grey .image-upload-button:hover,
body.theme-grey .image-upload-button:focus-visible,
body.theme-grey .image-upload-button.open {
  background: var(--ui-surface);
  opacity: 0.98;
}

.image-upload-input {
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.image-library-picker {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 96;
  display: grid;
  grid-template-columns: repeat(var(--image-library-option-count, 3), 86px);
  grid-auto-flow: column;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: var(--ui-surface);
  max-width: calc(100vw - 40px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 22px)) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    opacity 150ms ease,
    transform 180ms var(--ui-load-ease-out);
}

.image-library-picker::-webkit-scrollbar {
  display: none;
}

.image-library-picker.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - 22px)) scale(1);
}

.image-library-picker.closing {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 22px)) scale(0.965);
  transition:
    opacity 150ms ease 95ms,
    transform 220ms var(--ui-load-ease-out) 70ms;
}

.image-library-picker.loading {
  pointer-events: none;
}

.image-library-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  min-width: 86px;
  height: 86px;
  border: 0;
  border-radius: 15px;
  padding: 8px;
  background: color-mix(in srgb, var(--ui-surface) 56%, #ffffff 44%);
  color: var(--fg);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variation-settings: "wdth" 630, "wght" 500;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(8px) scale(0.965);
  transition:
    background 140ms ease,
    color 140ms ease,
    box-shadow 150ms ease,
    opacity 135ms ease,
    transform 185ms var(--ui-load-ease-out);
  transition-delay:
    0ms,
    0ms,
    0ms,
    calc(var(--image-library-option-index, 0) * 34ms),
    calc(var(--image-library-option-index, 0) * 34ms);
}

body.theme-light .image-library-option {
  background: color-mix(in srgb, var(--ui-surface) 42%, #ffffff 58%);
}

.image-library-picker.visible .image-library-option {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.image-library-picker.closing .image-library-option {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition-delay:
    0ms,
    0ms,
    0ms,
    calc((var(--image-library-option-count, 1) - var(--image-library-option-index, 0) - 1) * 24ms),
    calc((var(--image-library-option-count, 1) - var(--image-library-option-index, 0) - 1) * 24ms);
}

.image-library-option:hover,
.image-library-option:focus-visible,
.image-library-option.keyboard-focused,
.image-library-option.confirm-pressed {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 20%, transparent);
  outline: none;
}

.image-library-picker.visible .image-library-option:hover,
.image-library-picker.visible .image-library-option:focus-visible,
.image-library-picker.visible .image-library-option.keyboard-focused {
  transform: translateY(0) scale(1);
}

.image-library-option.confirm-pressed {
  transform: translateY(0) scale(1);
}

.image-library-picker.visible .image-library-option.confirm-pressed {
  transform: translateY(0) scale(1);
}

.image-library-option img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  pointer-events: none;
  transform: scale(1);
  transition:
    filter 150ms ease,
    opacity 150ms ease,
    transform 170ms var(--ui-load-ease-out);
}

.image-library-option:hover img,
.image-library-option:focus-visible img {
  filter: none;
  transform: scale(1);
}

.image-library-option-custom {
  justify-items: center;
  align-items: center;
}

.image-library-custom-plus {
  position: relative;
  display: block;
  align-self: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--ui-picker-active-surface);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  pointer-events: none;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 170ms var(--ui-load-ease-out);
}

.image-library-option-custom:hover .image-library-custom-plus,
.image-library-option-custom:focus-visible .image-library-custom-plus {
  background: var(--ui-picker-active-surface);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  transform: scale(1);
}

.image-library-custom-plus::before,
.image-library-custom-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.image-library-custom-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.image-library-option-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

body.theme-dark .image-library-option,
body.theme-dim .image-library-option,
body.theme-blue .image-library-option {
  background: color-mix(in srgb, var(--ui-surface) 84%, #ffffff 10%);
}

body.theme-dark .image-library-option:hover,
body.theme-dark .image-library-option:focus-visible,
body.theme-dark .image-library-option.keyboard-focused,
body.theme-dark .image-library-option.confirm-pressed,
body.theme-dim .image-library-option:hover,
body.theme-dim .image-library-option:focus-visible,
body.theme-dim .image-library-option.keyboard-focused,
body.theme-dim .image-library-option.confirm-pressed,
body.theme-blue .image-library-option:hover,
body.theme-blue .image-library-option:focus-visible,
body.theme-blue .image-library-option.keyboard-focused,
body.theme-blue .image-library-option.confirm-pressed {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #ffffff 24%, transparent);
}

body.theme-dark .image-library-option-custom:hover .image-library-custom-plus,
body.theme-dark .image-library-option-custom:focus-visible .image-library-custom-plus,
body.theme-dim .image-library-option-custom:hover .image-library-custom-plus,
body.theme-dim .image-library-option-custom:focus-visible .image-library-custom-plus,
body.theme-blue .image-library-option-custom:hover .image-library-custom-plus,
body.theme-blue .image-library-option-custom:focus-visible .image-library-custom-plus {
  background: var(--ui-picker-active-surface);
  color: color-mix(in srgb, var(--fg) 62%, transparent);
}

@media (hover: none) and (pointer: coarse) and (min-width: 701px) {
  body.ipad-like-platform .image-library-picker {
    grid-template-columns: repeat(var(--image-library-option-count, 3), 104px);
    gap: 16px;
    padding: 18px;
    border-radius: 26px;
  }

  body.ipad-like-platform .image-library-option {
    width: 104px;
    min-width: 104px;
    height: 104px;
    border-radius: 18px;
    padding: 10px;
    font-size: 13px;
  }

  body.ipad-like-platform .image-library-option img {
    border-radius: 12px;
  }

  body.ipad-like-platform .image-library-custom-plus {
    width: 58px;
    height: 58px;
  }

  body.ipad-like-platform .image-library-custom-plus::before,
  body.ipad-like-platform .image-library-custom-plus::after {
    width: 27px;
    height: 3.4px;
  }
}

/* Voice input feature: remove/comment this section with the matching HTML block and app.js flag to disable. */
.voice-record-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 28;
  display: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--ui-surface);
  color: var(--fg);
  place-items: center;
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 15px;
  line-height: 1;
  opacity: 0.68;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: opacity 520ms ease, transform 760ms var(--ui-load-ease),
    background 120ms ease,
    border-color 120ms ease, color 120ms ease;
  transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms;
}

.ui-loading .voice-record-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.84);
  transition-delay: 0ms;
}

.voice-record-button::before {
  content: "";
  position: absolute;
  inset: -21px;
  border-radius: 999px;
}

@media (pointer: fine) {
  .voice-record-button::before {
    inset: -9px;
  }
}

.voice-record-button:hover,
.voice-record-button:focus-visible {
  opacity: 0.98;
  transform: scale(1.08);
  transition-delay: 0ms;
}

.voice-record-button:focus,
.voice-record-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.voice-record-icon {
  display: block;
  transform: translateY(-1px);
}

.voice-recording .voice-record-button,
.voice-record-button.recording {
  opacity: 1;
  color: #fff;
  background: var(--connection);
}

.voice-input-enabled .voice-record-button {
  display: grid;
}

.phone-keyboard-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 28;
  display: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--ui-surface);
  color: var(--fg);
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 15px;
  line-height: 1;
  opacity: 0.68;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transform: none;
  transition: opacity 520ms ease, transform 760ms var(--ui-load-ease),
    background 120ms ease,
    border-color 120ms ease, color 120ms ease;
  transition-delay: 510ms, 510ms, 0ms, 0ms, 0ms;
}

.ui-loading .phone-keyboard-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.84);
  transition-delay: 0ms;
}

.phone-stress-test-button {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 28;
  display: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--ui-surface);
  color: var(--fg);
  font-family: "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 15px;
  line-height: 1;
  opacity: 0.68;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: opacity 520ms ease, transform 760ms var(--ui-load-ease),
    background 120ms ease,
    border-color 120ms ease, color 120ms ease;
  transition-delay: 590ms, 590ms, 0ms, 0ms, 0ms;
}

.ui-loading .phone-stress-test-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.84);
  transition-delay: 0ms;
}

.phone-keyboard-button::before,
.phone-stress-test-button::before {
  content: "";
  position: absolute;
  inset: -21px;
  border-radius: 999px;
}

.phone-keyboard-button:hover,
.phone-keyboard-button:focus-visible {
  opacity: 0.98;
  transform: scale(1.08);
}

.phone-stress-test-button:hover,
.phone-stress-test-button:focus-visible {
  opacity: 0.98;
  transform: scale(1.08);
}

.phone-keyboard-button:focus,
.phone-keyboard-button:focus-visible,
.phone-stress-test-button:focus,
.phone-stress-test-button:focus-visible {
  outline: none;
  box-shadow: none;
}

.phone-keyboard-input {
  position: fixed;
  left: -100vw;
  top: -100vh;
  z-index: -1;
  width: 0;
  height: 0;
  border: 0;
  padding: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 0;
  pointer-events: none;
  resize: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

.phone-keyboard-enabled .phone-keyboard-button {
  display: grid;
  place-items: center;
}

.phone-stress-test-enabled .phone-stress-test-button {
  display: grid;
  place-items: center;
}

.note-fullscreen-control {
  --note-fullscreen-hit-size: 24px;
  --note-fullscreen-dot-size: 24px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 52;
  display: grid;
  place-items: center;
  width: var(--note-fullscreen-hit-size);
  height: var(--note-fullscreen-hit-size);
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--note-fullscreen-accent, var(--selection-extra));
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(0.72);
  transition:
    opacity 120ms ease,
    transform 200ms var(--ui-load-ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.note-fullscreen-control::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--note-fullscreen-dot-size);
  height: var(--note-fullscreen-dot-size);
  border-radius: inherit;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 150ms var(--ui-load-ease-out);
}

.note-fullscreen-control.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.note-fullscreen-control:hover,
.note-fullscreen-control:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.note-fullscreen-control:hover::before,
.note-fullscreen-control:focus-visible::before {
  transform: translate(-50%, -50%) scale(1.08);
}

.note-fullscreen-control:focus,
.note-fullscreen-control:focus-visible {
  outline: none;
  box-shadow: none;
}

.note-fullscreen-icon {
  display: none;
}

.note-focus-active .drag-tool-dots,
.note-focus-active .glyph-editor-launch-button,
.note-focus-active .grid-element-picker,
.note-focus-active .line-end-picker,
.note-focus-active .selection-color-picker,
.note-focus-active .image-upload-button,
.note-focus-active .minimap-button,
.note-focus-active .minimap-panel,
.note-focus-active .account-panel:not(.expanded),
.note-focus-active .voice-record-button,
.note-focus-active .phone-keyboard-button,
.note-focus-active .phone-stress-test-button,
.note-focus-active .drop-delete-target,
.note-focus-active .note-fullscreen-control,
.text-box-focus-active .drag-tool-dots,
.text-box-focus-active .glyph-editor-launch-button,
.text-box-focus-active .grid-element-picker,
.text-box-focus-active .line-end-picker,
.text-box-focus-active .image-upload-button,
.text-box-focus-active .minimap-button,
.text-box-focus-active .minimap-panel,
.text-box-focus-active .account-panel:not(.expanded),
.text-box-focus-active .voice-record-button,
.text-box-focus-active .phone-keyboard-button,
.text-box-focus-active .phone-stress-test-button,
.text-box-focus-active .drop-delete-target,
.text-box-focus-active .note-fullscreen-control {
  opacity: 0;
  pointer-events: none;
}

body.note-focus-active .drag-tool-dots,
body.note-focus-active .glyph-editor-launch-button,
body.text-box-focus-active .drag-tool-dots,
body.text-box-focus-active .glyph-editor-launch-button {
  transition-duration: 130ms, 130ms, 120ms;
  transition-delay: 0ms;
}

.note-focus-active .note-fullscreen-control,
.text-box-focus-active .note-fullscreen-control {
  transform: translate(-50%, -50%) scale(0.52);
}

.text-box-focus-active .selection-color-picker {
  z-index: 98;
}

body.note-focus-active,
body.text-box-focus-active,
body.note-focus-active .app,
body.text-box-focus-active .app,
body.note-focus-active .write-layer,
body.text-box-focus-active .write-layer {
  touch-action: pan-y;
}

body.note-focus-active .note-focus-overlay,
body.note-focus-active .note-focus-body,
body.text-box-focus-active .text-box-focus-overlay,
body.text-box-focus-active .text-box-focus-fields,
body.text-box-focus-active .text-box-focus-field {
  touch-action: pan-y;
}

.note-focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  background-color: var(--note-focus-overlay);
  perspective: 1100px;
  transition:
    opacity 140ms ease,
    background-color 220ms ease;
}

body.theme-blue .note-focus-overlay {
  background-color: var(--bg);
}

body.theme-blue .note-focus-overlay.opening.visible,
body.theme-blue .note-focus-overlay.closing {
  background-color: var(--bg);
}

.note-focus-overlay[hidden] {
  display: none !important;
}

.note-focus-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.note-focus-overlay.opening.visible {
  background-color: transparent;
}

.note-focus-overlay.closing {
  opacity: 1;
  pointer-events: none;
  background-color: transparent;
}

.note-focus-overlay.closing .note-focus-panel::before,
.note-focus-overlay.closing .note-focus-search,
.note-focus-overlay.closing .note-focus-title,
.note-focus-overlay.closing .note-focus-body {
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: none;
}

.note-focus-panel {
  --note-focus-duration: 640ms;
  --note-focus-gap: 14px;
  --note-focus-pad-x: clamp(18px, 4vw, 48px);
  --note-focus-pad-y: clamp(18px, 4vw, 48px);
  --note-focus-text-safe-inset-x: 2px;
  --note-focus-text-safe-inset-y: 2px;
  --note-focus-radius: 8px;
  --note-focus-title-bleed-x: 9px;
  --note-focus-title-size: 32px;
  --note-focus-title-line-height: 39.04px;
  --note-focus-title-pad-y: 2px;
  --note-focus-title-extra-y: 4px;
  --note-focus-title-block-height: calc(
    var(--note-focus-title-line-height) +
    var(--note-focus-title-pad-y) * 2 +
    var(--note-focus-title-extra-y) +
    6px
  );
  --note-focus-body-size: 18px;
  --note-focus-body-line-height: 29.7px;
  --note-focus-body-top: calc(
    var(--note-focus-pad-y) +
    var(--note-focus-title-block-height) +
    var(--note-focus-gap)
  );
  --note-focus-title-fade-height: calc(
    var(--note-focus-gap) + var(--note-focus-body-line-height) * 1.05
  );
  position: fixed;
  left: 50%;
  top: 50%;
  display: block;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid var(--note-focus-border);
  border-radius: var(--note-focus-radius);
  padding: var(--note-focus-pad-y) var(--note-focus-pad-x);
  background: var(--note-focus-surface);
  color: var(--note-focus-text);
  box-shadow: 0 24px 70px color-mix(in srgb, #000000 23%, transparent);
  overflow: visible;
  transform: none;
  transform-origin: center center;
  transition:
    left var(--note-focus-duration) var(--ui-load-ease),
    top var(--note-focus-duration) var(--ui-load-ease),
    width var(--note-focus-duration) var(--ui-load-ease),
    height var(--note-focus-duration) var(--ui-load-ease),
    padding var(--note-focus-duration) var(--ui-load-ease),
    border-radius var(--note-focus-duration) var(--ui-load-ease),
    gap var(--note-focus-duration) var(--ui-load-ease),
    transform var(--note-focus-duration) var(--ui-load-ease);
}

.note-focus-panel::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--note-focus-pad-x);
  right: var(--note-focus-pad-x);
  top: calc(var(--note-focus-body-top) - var(--note-focus-gap) * 0.54);
  height: var(--note-focus-title-fade-height);
  background: linear-gradient(
    to bottom,
    var(--note-focus-surface) 0%,
    color-mix(in srgb, var(--note-focus-surface) 98%, transparent) 34%,
    color-mix(in srgb, var(--note-focus-surface) 70%, transparent) 66%,
    color-mix(in srgb, var(--note-focus-surface) 0%, transparent) 100%
  );
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 260ms var(--ui-load-ease-out);
}

.note-focus-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  right: calc(var(--note-focus-pad-x) + 10px);
  top: calc(var(--note-focus-pad-y) + var(--note-focus-title-block-height) * 0.5 - 5px);
  background: var(--note-focus-accent, var(--selection-extra));
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.78);
  transition: opacity 180ms ease, transform 260ms var(--ui-load-ease-out);
}

.note-focus-title,
.note-focus-body {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 260ms var(--ui-load-ease-out);
}

.note-focus-overlay.settled .note-focus-title,
.note-focus-overlay.settled .note-focus-body,
.note-focus-overlay.settled .note-focus-text-mirror.visible {
  opacity: 1;
  transform: translateY(0);
}

.note-focus-overlay.settled .note-focus-panel::before {
  opacity: 1;
  transform: translateY(0);
}

.note-focus-overlay.settled .note-focus-panel::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.note-focus-close {
  position: absolute;
  left: var(--note-focus-close-x, calc(100% - 30px));
  top: var(--note-focus-close-y, 30px);
  z-index: 12;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--fg) 28%, var(--bg) 72%);
  color: #ffffff;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
  cursor: pointer;
  touch-action: manipulation;
}

.note-focus-overlay.settled .note-focus-close {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.note-focus-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--svg-close-thin) center / contain no-repeat;
  mask: var(--svg-close-thin) center / contain no-repeat;
  transition: opacity 120ms ease;
}

.note-focus-close::after {
  content: none;
}

.note-focus-close:hover,
.note-focus-close:focus-visible {
  color: #ffffff;
  background: color-mix(in srgb, var(--fg) 36%, var(--bg) 64%);
}

.note-focus-overlay.closing .note-focus-panel::after {
  opacity: 0;
  transform: translateY(4px) scale(0.88);
}

.note-focus-overlay.closing .note-focus-close {
  opacity: 0;
  transform: translate(-50%, -50%);
}

.fullscreen-search {
  position: absolute;
  right: 52px;
  top: 12px;
  z-index: 5;
  --fullscreen-search-width: clamp(176px, 34vw, 252px);
  --fullscreen-search-collapsed-size: var(--canvas-control-circle-size, 42px);
  --fullscreen-search-collapsed-track: 18px;
  --fullscreen-search-gap-expanded: 5px;
  --fullscreen-search-padding-left-expanded: 13px;
  --fullscreen-search-padding-right-expanded: 6px;
  --fullscreen-search-padding-left-collapsed: 11px;
  --fullscreen-search-padding-right-collapsed: 12px;
  display: grid;
  grid-template-columns: 18px minmax(64px, 1fr) auto 22px 22px 22px;
  align-items: center;
  gap: var(--fullscreen-search-gap-expanded);
  width: var(--fullscreen-search-width);
  height: var(--canvas-control-circle-size, 42px);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 999px;
  padding: 0 var(--fullscreen-search-padding-right-expanded) 0 var(--fullscreen-search-padding-left-expanded);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  color: inherit;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
  cursor: text;
  transition:
    width 230ms var(--ui-load-ease-out),
    padding 230ms var(--ui-load-ease-out),
    gap 230ms var(--ui-load-ease-out),
    background-color 140ms ease,
    border-color 140ms ease;
}

.text-box-focus-search {
  --text-box-focus-control-enter-y: 22px;
  --text-box-focus-control-exit-y: 16px;
  --fullscreen-search-width: clamp(210px, 22vw, 300px);
  --fullscreen-search-collapsed-size: var(--canvas-control-circle-size, 42px);
  --fullscreen-search-collapsed-track: 18px;
  --fullscreen-search-padding-left-expanded: 17px;
  --fullscreen-search-padding-right-expanded: 12px;
  --fullscreen-search-padding-left-collapsed: 11px;
  --fullscreen-search-padding-right-collapsed: 12px;
  position: fixed;
  top: auto;
  right: clamp(20px, 4.1vw, 54px);
  bottom: clamp(20px, 4.1vh, 54px);
  height: var(--canvas-control-circle-size, 42px);
  border: none;
  border-radius: 999px;
  background: var(--text-box-focus-control-grey);
  color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.text-box-focus-search:not(.expanded):not(.has-query) {
  color: #ffffff;
}

.text-box-focus-search:not(.expanded):not(.has-query) .fullscreen-search-icon {
  color: #ffffff;
}

.text-box-focus-search:hover,
.text-box-focus-search:focus-visible {
  background: color-mix(in srgb, var(--text-box-focus-control-grey) 72%, transparent);
}

.text-box-focus-search .fullscreen-search-icon {
  width: 15px;
  height: 15px;
  transform: translate(-1.7px, 0.05px);
}

.text-box-focus-search .fullscreen-search-input {
  height: 28px;
  font-size: 12px;
}

.text-box-focus-search .fullscreen-search-input::placeholder {
  color: color-mix(in srgb, #ffffff 56%, transparent);
}

.text-box-focus-search .fullscreen-search-count {
  font-size: 10px;
  color: #ffffff;
}

.text-box-focus-search .fullscreen-search-step,
.text-box-focus-search .fullscreen-search-clear {
  width: 22px;
  height: 22px;
  color: #ffffff;
}

.text-box-focus-search .fullscreen-search-icon {
  color: #ffffff;
}

.fullscreen-search:not(.expanded):not(.has-query) {
  grid-template-columns: var(--fullscreen-search-collapsed-track) 0 0 0 0 0;
  justify-content: start;
  gap: 0;
  width: var(--fullscreen-search-collapsed-size);
  padding:
    0
    var(--fullscreen-search-padding-right-collapsed)
    0
    var(--fullscreen-search-padding-left-collapsed);
  cursor: pointer;
}

.fullscreen-search.expanding {
  animation: fullscreen-search-expand 230ms var(--ui-load-ease-out);
}

@keyframes fullscreen-search-expand {
  from {
    width: var(--fullscreen-search-collapsed-size);
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }
  to {
    width: var(--fullscreen-search-width);
    padding-left: var(--fullscreen-search-padding-left-expanded);
    padding-right: var(--fullscreen-search-padding-right-expanded);
    gap: var(--fullscreen-search-gap-expanded);
  }
}

.fullscreen-search.collapsing {
  grid-template-columns: var(--fullscreen-search-collapsed-track) 0 0 0 0 0;
  justify-content: start;
  animation: fullscreen-search-collapse 180ms var(--ui-load-ease-out) both;
}

@keyframes fullscreen-search-collapse {
  from {
    width: var(--fullscreen-search-width);
    padding-left: var(--fullscreen-search-padding-left-expanded);
    padding-right: var(--fullscreen-search-padding-right-expanded);
    gap: var(--fullscreen-search-gap-expanded);
  }
  to {
    width: var(--fullscreen-search-collapsed-size);
    padding-left: var(--fullscreen-search-padding-left-collapsed);
    padding-right: var(--fullscreen-search-padding-right-collapsed);
    gap: 0;
  }
}

.fullscreen-search:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.fullscreen-search-icon {
  position: relative;
  justify-self: center;
  width: 14px;
  height: 14px;
  color: color-mix(in srgb, currentColor 56%, transparent);
  background: currentColor;
  -webkit-mask: var(--svg-search-magnifier) center / contain no-repeat;
  mask: var(--svg-search-magnifier) center / contain no-repeat;
  transition: color 120ms ease;
}

.note-focus-search .fullscreen-search-icon {
  width: 15.5px;
  height: 15.5px;
  transform: translate(-0.35px, 0.02px);
}

.fullscreen-search:not(.expanded):not(.has-query):hover .fullscreen-search-icon,
.fullscreen-search:not(.expanded):not(.has-query):focus-visible .fullscreen-search-icon {
  color: currentColor;
}

.fullscreen-search-icon::before,
.fullscreen-search-icon::after {
  display: none;
}

.fullscreen-search-input {
  min-width: 0;
  height: 28px;
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 13px;
  font-weight: 450;
  font-variation-settings: "wdth" 630;
  letter-spacing: 0;
  outline: none;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 120ms ease,
    transform 160ms var(--ui-load-ease-out);
}

.fullscreen-search-input::placeholder {
  color: color-mix(in srgb, currentColor 42%, transparent);
  opacity: 1;
}

.fullscreen-search-input::-webkit-search-decoration,
.fullscreen-search-input::-webkit-search-cancel-button {
  display: none;
}

.fullscreen-search-count {
  min-width: 0;
  color: color-mix(in srgb, currentColor 46%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 11px;
  font-weight: 450;
  font-variation-settings: "wdth" 630;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 100ms ease;
}

.fullscreen-search:not(.expanded):not(.has-query) .fullscreen-search-input,
.fullscreen-search:not(.expanded):not(.has-query) .fullscreen-search-count,
.fullscreen-search:not(.expanded):not(.has-query) .fullscreen-search-step,
.fullscreen-search:not(.expanded):not(.has-query) .fullscreen-search-clear {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-search.expanding .fullscreen-search-input {
  animation: fullscreen-search-input-reveal 190ms var(--ui-load-ease-out) 44ms both;
}

.fullscreen-search.collapsing .fullscreen-search-input,
.fullscreen-search.collapsing .fullscreen-search-count,
.fullscreen-search.collapsing .fullscreen-search-step,
.fullscreen-search.collapsing .fullscreen-search-clear {
  animation: fullscreen-search-input-hide 120ms ease both;
  pointer-events: none;
}

@keyframes fullscreen-search-input-reveal {
  from {
    opacity: 0;
    transform: translateX(7px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fullscreen-search-input-hide {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(6px);
  }
}

.fullscreen-search:not(.has-query) .fullscreen-search-count,
.fullscreen-search:not(.has-query) .fullscreen-search-step {
  opacity: 0;
  pointer-events: none;
}

.fullscreen-search.no-matches .fullscreen-search-count {
  color: color-mix(in srgb, var(--connection) 74%, currentColor 26%);
}

.fullscreen-search-step,
.fullscreen-search-clear {
  position: relative;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, currentColor 62%, transparent);
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease,
    opacity 120ms ease;
}

.fullscreen-search-step:hover,
.fullscreen-search-step:focus-visible,
.fullscreen-search-clear:hover,
.fullscreen-search-clear:focus-visible {
  color: currentColor;
  background: color-mix(in srgb, currentColor 9%, transparent);
  outline: none;
}

.fullscreen-search-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--fullscreen-search-step-mask) center / contain no-repeat;
  mask: var(--fullscreen-search-step-mask) center / contain no-repeat;
}

.fullscreen-search-prev::before {
  --fullscreen-search-step-mask: var(--svg-search-prev);
}

.fullscreen-search-next::before {
  --fullscreen-search-step-mask: var(--svg-search-next);
}

.fullscreen-search-clear::before,
.fullscreen-search-clear::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: currentColor;
}

.fullscreen-search-clear::before {
  transform: translate(-50%, -50%);
  -webkit-mask: var(--svg-search-clear) center / contain no-repeat;
  mask: var(--svg-search-clear) center / contain no-repeat;
}

.fullscreen-search-clear::after {
  display: none;
}

.note-focus-close:focus,
.note-focus-close:focus-visible,
.note-focus-title:focus,
.note-focus-body:focus {
  outline: none;
  box-shadow: none;
}

.note-focus-title,
.note-focus-body {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  border: none;
  padding: 0;
  background: transparent;
  color: var(--note-focus-text);
  -webkit-text-fill-color: var(--note-focus-text);
  caret-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: "geogeo-ProportionalRegular", "Inter", "SF Pro Text", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: var(--note-focus-letter-spacing);
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.note-focus-text-mirror {
  position: absolute;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding:
    var(--note-focus-text-safe-inset-y)
    0
    0
    var(--note-focus-text-safe-inset-x);
  overflow: hidden;
  color: var(--note-focus-text);
  -webkit-text-fill-color: var(--note-focus-text);
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  opacity: 0;
  transform: none;
  transition: opacity 120ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.note-focus-text-mirror.title {
  z-index: 4;
  overflow: visible;
  white-space: pre;
}

.note-focus-text-mirror .mirrored-selection {
  background: var(--text-box-selection-bg);
  color: var(--text-box-selection-fg);
  -webkit-text-fill-color: var(--text-box-selection-fg);
  border-radius: 4px;
}

.note-focus-text-mirror.body {
  z-index: 1;
}

.note-focus-overlay.settled.mirrored-text .note-focus-title,
.note-focus-overlay.settled.mirrored-text .note-focus-body {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.note-focus-overlay.settled.title-mirrored .note-focus-title {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.note-focus-title {
  position: absolute;
  left: calc(var(--note-focus-pad-x) - var(--note-focus-title-bleed-x));
  right: calc(var(--note-focus-pad-x) - var(--note-focus-title-bleed-x));
  top: var(--note-focus-pad-y);
  z-index: 4;
  width: auto;
  height: var(--note-focus-title-block-height);
  min-height: 0;
  margin: 0;
  padding:
    var(--note-focus-title-pad-y)
    var(--note-focus-title-bleed-x)
    calc(var(--note-focus-title-pad-y) + var(--note-focus-title-extra-y));
  overflow: visible;
  font-size: var(--note-focus-title-size);
  line-height: var(--note-focus-title-line-height);
}

.note-focus-body {
  position: absolute;
  left: var(--note-focus-pad-x);
  right: var(--note-focus-pad-x);
  top: var(--note-focus-body-top);
  bottom: var(--note-focus-pad-y);
  z-index: 1;
  width: auto;
  height: auto;
  min-height: 0;
  resize: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-size: var(--note-focus-body-size);
  line-height: var(--note-focus-body-line-height);
  touch-action: pan-y;
}

.note-focus-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.note-focus-title::selection,
.note-focus-body::selection {
  background: var(--text-box-selection-bg);
  color: var(--text-box-selection-fg);
}

.text-box-inline-editor {
  position: fixed;
  z-index: 42;
  display: block;
  box-sizing: border-box;
  border: none;
  border-radius: 6px;
  margin: 0;
  padding: 6px 8px;
  background: transparent;
  background-clip: padding-box;
  color: transparent;
  caret-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--text-box-font-family);
  font-style: normal;
  font-weight: var(--text-box-font-weight);
  font-feature-settings: "ss02" 1;
  font-variation-settings: var(--text-box-font-variation-settings);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: -0.01em;
  hyphens: manual;
  -webkit-hyphens: manual;
  line-height: 1.28;
  resize: none;
  overflow: hidden;
  outline: none;
  box-shadow: none;
  vertical-align: top;
  overflow-anchor: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.text-box-inline-editor[hidden] {
  display: none !important;
}

.text-box-keyboard-proxy {
  position: fixed;
  z-index: -1;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  outline: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  caret-color: transparent;
}

.text-box-inline-editor::selection {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-box-inline-editor.selection-picker-hover,
.text-box-focus-field.selection-picker-hover {
  cursor: pointer !important;
}

.text-box-focus-field::selection {
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body.ipad-like-platform .text-box-inline-editor,
body.ipad-like-platform .text-box-focus-field {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.text-box-classic-caret {
  --text-box-classic-caret-visible-opacity: 1;
  position: fixed;
  z-index: 96;
  display: none;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  background: var(--text-box-caret-border);
  pointer-events: none;
  opacity: 1;
  transform: translateZ(0);
  animation: text-box-classic-caret-blink 1120ms steps(1, end) infinite;
}

.text-box-classic-caret.visible {
  display: block;
}

.text-box-classic-caret-mirror {
  position: fixed;
  left: -10000px;
  top: 0;
  z-index: -1;
  visibility: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  contain: layout style paint;
}

@keyframes text-box-classic-caret-blink {
  0%,
  58% {
    opacity: var(--text-box-classic-caret-visible-opacity, 1);
  }

  59%,
  100% {
    opacity: 0;
  }
}

.text-box-focus-overlay {
  --text-box-focus-duration: 640ms;
  --text-box-focus-text-fade-out-duration: 190ms;
  --text-box-focus-text-fade-in-duration: 260ms;
  --text-box-focus-frame: color-mix(in srgb, var(--text-box-focus-on-surface) 4%, transparent);
  --text-box-focus-control-stroke: 1.9px;
  --text-box-focus-control-icon-length: 17px;
  --text-box-focus-note-control-size: 28px;
  --text-box-focus-control-red: var(--sketch);
  --text-box-focus-control-green: var(--selection-extra);
  --text-box-focus-control-grey: color-mix(in srgb, var(--text-box-focus-on-surface) 14%, var(--text-box-focus-field-bg) 86%);
  --text-box-focus-control-grey-hover: color-mix(in srgb, var(--text-box-focus-on-surface) 18%, var(--text-box-focus-field-bg) 82%);
  position: fixed;
  inset: 0;
  z-index: 91;
  opacity: 0;
  pointer-events: none;
  background-color: var(--text-box-focus-overlay-bg);
  transition:
    opacity 120ms ease,
    background-color 140ms ease;
}

.text-box-focus-overlay[hidden] {
  display: none !important;
}

.text-box-focus-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  background-color: var(--text-box-focus-overlay-bg);
}

.text-box-focus-overlay.opening.visible {
  background-color: transparent;
}

.text-box-focus-overlay.closing {
  opacity: 1;
  pointer-events: none;
  background-color: transparent;
}

.text-box-focus-panel {
  --text-box-focus-shell-pad-x: 72px;
  --text-box-focus-shell-pad-top: 78px;
  --text-box-focus-shell-pad-bottom: 58px;
  --text-box-focus-shell-radius: 18px;
  --text-box-focus-main-gap: 14px;
  --text-box-focus-field-gap: 17px;
  --text-box-focus-field-radius: 10px;
  --text-box-focus-field-pad-x: 28px;
  --text-box-focus-field-pad-y: 17px;
  --text-box-focus-field-font-size: 20px;
  --text-box-focus-field-line-height: 25px;
  --text-box-focus-field-letter-spacing: 0.2px;
  --text-box-focus-field-min-height: 112px;
  --text-box-focus-list-row-pad-x: 14px;
  --text-box-focus-list-row-pad-y: 13px;
  --text-box-focus-list-row-gap: 14px;
  --text-box-focus-list-field-min-height: 52px;
  --text-box-focus-list-marker-size: 20px;
  --text-box-focus-list-marker-margin-top: 10px;
  --text-box-focus-list-marker-border-width: 2px;
  position: fixed;
  left: 50%;
  top: 50%;
  display: block;
  min-width: 24px;
  min-height: 24px;
  border: none;
  border-radius: var(--text-box-focus-shell-radius);
  padding:
    var(--text-box-focus-shell-pad-top)
    var(--text-box-focus-shell-pad-x)
    var(--text-box-focus-shell-pad-bottom);
  background: var(--text-box-focus-field-bg);
  color: var(--text-box-focus-on-surface);
  box-shadow: inset 0 0 0 1.08px var(--text-box-focus-frame);
  overflow: hidden;
  transform: none;
  transform-origin: center center;
  transition:
    left var(--text-box-focus-duration) var(--ui-load-ease),
    top var(--text-box-focus-duration) var(--ui-load-ease),
    width var(--text-box-focus-duration) var(--ui-load-ease),
    height var(--text-box-focus-duration) var(--ui-load-ease),
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease),
    background-color 220ms ease;
  will-change: left, top, width, height;
}

.text-box-focus-panel::after {
  content: none;
  display: none;
}

.text-box-focus-overlay.opening .text-box-focus-panel,
.text-box-focus-overlay.closing .text-box-focus-panel {
  pointer-events: none;
}

.text-box-focus-main {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.text-box-focus-tabs {
  position: fixed;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition:
    opacity 240ms ease;
  scrollbar-width: none;
}

.text-box-focus-tabs::before,
.text-box-focus-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.text-box-focus-tabs::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--text-box-focus-overlay-bg) 0%,
    color-mix(in srgb, var(--text-box-focus-overlay-bg) 72%, transparent) 22%,
    color-mix(in srgb, var(--text-box-focus-overlay-bg) 0%, transparent) 100%
  );
}

.text-box-focus-tabs::after {
  bottom: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text-box-focus-overlay-bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--text-box-focus-overlay-bg) 88%, transparent) 22%,
    color-mix(in srgb, var(--text-box-focus-overlay-bg) 99%, transparent) 48%,
    var(--text-box-focus-overlay-bg) 100%
  );
}

.text-box-focus-tabs.tabs-scrollable.tabs-scrolled-top::before,
.text-box-focus-tabs.tabs-scrollable.tabs-scrolled-bottom::after {
  opacity: 1;
}

.text-box-focus-tabs-scroll {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 2px 132px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  pointer-events: auto;
}

.text-box-focus-tabs::-webkit-scrollbar {
  display: none;
}

.text-box-focus-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.text-box-focus-tabs.top-row {
  padding: 0;
  transform: translateY(-8px);
}

.text-box-focus-tabs.top-row::before,
.text-box-focus-tabs.top-row::after {
  display: none;
}

.text-box-focus-tabs.top-row .text-box-focus-tabs-scroll {
  flex-direction: row;
  gap: 10px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.text-box-focus-overlay.settled .text-box-focus-tabs.top-row,
.text-box-focus-overlay.closing .text-box-focus-tabs.top-row {
  transform: translateY(0);
}

.text-box-focus-tabs.top-row .text-box-focus-tab {
  width: 148px;
  min-width: 148px;
  min-height: 72px;
  border-width: 5px;
  border-radius: 16px;
  padding: 9px 11px 10px;
  transform: translateY(-8px);
}

.text-box-focus-overlay.settled .text-box-focus-tabs.top-row .text-box-focus-tab {
  transform: translateY(0);
}

.text-box-focus-overlay.closing .text-box-focus-tabs.top-row .text-box-focus-tab,
.text-box-focus-overlay.closing-tabs .text-box-focus-tabs.top-row .text-box-focus-tab {
  transform: translateY(-8px);
}

.text-box-focus-tabs.top-row .text-box-focus-tab-date {
  margin-bottom: 8px;
  font-size: 10.5px;
}

.text-box-focus-tabs.top-row .text-box-focus-tab-label {
  max-height: 32px;
  font-size: 10.5px;
}

.text-box-focus-close,
.text-box-focus-search,
.text-box-focus-add-field {
  opacity: 0;
  transform: translateY(var(--text-box-focus-control-enter-y, 18px)) scale(0.94);
  transform-origin: top center;
  transition:
    opacity 260ms ease,
    transform 520ms var(--ui-load-ease-out),
    background-color 160ms ease,
    color 160ms ease;
  transition-delay: 0ms;
}

.text-box-focus-overlay.settled .text-box-focus-close,
.text-box-focus-overlay.settled .text-box-focus-search,
.text-box-focus-overlay.settled .text-box-focus-add-field {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.text-box-focus-overlay.settled .text-box-focus-close {
  transition-delay: 92ms;
}

.text-box-focus-overlay.settled .text-box-focus-search {
  transition-delay: 154ms;
}

.text-box-focus-overlay.settled .text-box-focus-add-field {
  transition-delay: 126ms;
}

.text-box-focus-overlay.closing .text-box-focus-close,
.text-box-focus-overlay.closing .text-box-focus-search,
.text-box-focus-overlay.closing .text-box-focus-add-field {
  opacity: 0;
  transform: translateY(var(--text-box-focus-control-exit-y, 12px)) scale(0.94);
  transition-delay: 0ms;
  transition-duration: 170ms, 260ms, 120ms, 120ms;
}

.text-box-focus-overlay.closing .text-box-focus-close {
  transform: translateY(0) scale(1);
  transition-duration: 170ms, 170ms, 120ms, 120ms;
}

.text-box-focus-overlay.settled .text-box-focus-tabs {
  opacity: 1;
  pointer-events: auto;
}

.text-box-focus-overlay.closing .text-box-focus-tabs {
  opacity: 1;
  pointer-events: none;
}

.text-box-focus-overlay.closing-tabs .text-box-focus-tabs {
  opacity: 1;
  pointer-events: none;
}

.text-box-focus-tab {
  --text-box-focus-inactive-tab-bg: color-mix(
    in srgb,
    var(--text-box-focus-close-like-bg) 68%,
    transparent
  );
  --text-box-focus-inactive-tab-hover-bg: color-mix(
    in srgb,
    var(--text-box-focus-close-like-bg) 88%,
    var(--text-box-focus-on-surface) 12%
  );
  --text-box-focus-inactive-tab-active-bg: color-mix(
    in srgb,
    var(--text-box-focus-close-like-bg) 78%,
    var(--text-box-focus-on-surface) 22%
  );
  --text-box-focus-inactive-tab-fg: color-mix(
    in srgb,
    var(--text-box-focus-on-surface) 68%,
    var(--text-box-focus-field-bg) 32%
  );
  --text-box-focus-close-like-bg: color-mix(
    in srgb,
    var(--text-box-focus-on-surface) 12%,
    var(--text-box-focus-field-bg) 88%
  );
  position: relative;
  width: 100%;
  min-height: 84px;
  border: none;
  border-radius: 20px;
  padding: 11px 15px 10px;
  background: var(--text-box-focus-tab-bg);
  box-shadow: inset 0 0 0 1px var(--text-box-focus-tab-border);
  color: var(--text-box-focus-tab-fg);
  cursor: pointer;
  touch-action: manipulation;
  overflow: visible;
  opacity: 0;
  transform: translateY(18px) scale(0.975);
  transform-origin: center bottom;
  transition:
    opacity 190ms ease,
    transform 360ms var(--ui-load-ease-out),
    border-color 140ms ease,
    background-color 220ms ease,
    color 140ms ease;
  transition-delay: 0ms;
}

.text-box-focus-overlay.settled .text-box-focus-tab {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--tab-open-delay, 0ms);
}

.text-box-focus-overlay.closing .text-box-focus-tab {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
  transition-delay: var(--tab-close-delay, 0ms);
  transition-duration: 100ms, 170ms, 90ms, 90ms, 90ms;
}

.text-box-focus-overlay.closing-tabs .text-box-focus-tab {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
  transition-delay: var(--tab-close-delay, 0ms);
  transition-duration: 100ms, 170ms, 90ms, 90ms, 90ms;
}

.text-box-focus-tabs.no-stagger .text-box-focus-tab {
  transition-delay: 0ms !important;
}

.text-box-focus-tab.active {
  background: var(--text-box-focus-surface);
  box-shadow: inset 0 0 0 1px var(--text-box-focus-tab-border);
  color: var(--text-box-focus-on-surface);
}

.text-box-focus-tab:not(.active) {
  background: var(--text-box-focus-inactive-tab-bg);
  color: var(--text-box-focus-inactive-tab-fg);
}

.text-box-focus-overlay.settled .text-box-focus-tab:not(.active) {
  opacity: 0.32;
  transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .text-box-focus-overlay.settled .text-box-focus-tab:not(.active):hover {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: var(--text-box-focus-surface);
    color: var(--text-box-focus-on-surface);
    box-shadow: inset 0 0 0 1px var(--text-box-focus-tab-border);
    transition-duration: 190ms, 360ms, 140ms, 260ms, 140ms;
  }

  .text-box-focus-overlay.settled .text-box-focus-tab:not(.active):active {
    opacity: 1;
    background: var(--text-box-focus-surface);
    color: var(--text-box-focus-on-surface);
    box-shadow: inset 0 0 0 1px var(--text-box-focus-tab-border);
    transition-duration: 90ms, 180ms, 90ms, 110ms, 90ms;
  }

  .text-box-focus-overlay.settled
    .text-box-focus-tab:not(.active):hover
    .text-box-focus-tab-date,
  .text-box-focus-overlay.settled
    .text-box-focus-tab:not(.active):active
    .text-box-focus-tab-date {
    color: color-mix(in srgb, var(--text-box-focus-on-surface) 64%, transparent);
  }

  .text-box-focus-overlay.settled
    .text-box-focus-tab:not(.active):hover
    .text-box-focus-tab-label,
  .text-box-focus-overlay.settled
    .text-box-focus-tab:not(.active):active
    .text-box-focus-tab-label {
    color: var(--text-box-focus-on-surface);
  }
}

.text-box-focus-tab-dot {
  position: absolute;
  right: 27px;
  top: 27px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--text-box-focus-tab-accent, var(--text-box-focus-accent));
  pointer-events: none;
  opacity: 1;
}

.text-box-focus-tab.active .text-box-focus-tab-date {
  color: color-mix(in srgb, var(--text-box-focus-on-surface) 64%, transparent);
}

.text-box-focus-tab:not(.active) .text-box-focus-tab-date,
.text-box-focus-tab:not(.active) .text-box-focus-tab-label {
  color: var(--text-box-focus-inactive-tab-fg);
}

.text-box-focus-tab:focus,
.text-box-focus-tab:focus-visible {
  outline: none;
  box-shadow: none;
}

.text-box-focus-tab-date {
  display: block;
  margin: 0 0 7px;
  overflow: hidden;
  color: color-mix(in srgb, var(--text-box-focus-on-surface) 28%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 13.5px;
  font-weight: 500;
  font-feature-settings: "case" 1;
  font-variation-settings: "wdth" 630;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text-box-focus-tab-label {
  display: block;
  max-height: 36px;
  overflow: hidden;
  font-family: var(--text-box-focus-font-family);
  font-feature-settings: "ss02" 1;
  font-weight: 700;
  font-variation-settings: var(--text-box-focus-font-variation-settings);
  font-size: 13.5px;
  line-height: 1.26;
  letter-spacing: 0;
  text-align: left;
  word-break: break-word;
}

.text-box-focus-add-icon {
  display: none;
}

.text-box-focus-tabs .text-box-focus-add-field {
  --text-box-focus-control-enter-y: 18px;
  --text-box-focus-control-exit-y: 12px;
  --text-box-focus-add-circle-bg: color-mix(
    in srgb,
    var(--text-box-focus-on-surface) 12%,
    var(--text-box-focus-field-bg) 88%
  );
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 84px;
  border: none;
  border-radius: 20px;
  padding: 0;
  margin: 0;
  background: var(--text-box-focus-tab-bg);
  box-shadow: inset 0 0 0 1px var(--text-box-focus-tab-border);
  color: #fff;
  cursor: pointer;
  overflow: visible;
  opacity: 0;
  transform: translateY(18px) scale(0.975);
  transform-origin: center bottom;
  transition:
    opacity 190ms ease,
    transform 360ms var(--ui-load-ease-out),
    background 140ms ease,
    color 140ms ease;
}

.text-box-focus-tabs .text-box-focus-add-field::before,
.text-box-focus-tabs .text-box-focus-add-field::after {
  display: none;
}

.text-box-focus-tabs .text-box-focus-add-field:hover,
.text-box-focus-tabs .text-box-focus-add-field:focus-visible {
  background: var(--text-box-focus-tab-bg);
}

.text-box-focus-tabs .text-box-focus-add-field:hover .text-box-focus-add-icon,
.text-box-focus-tabs .text-box-focus-add-field:focus-visible .text-box-focus-add-icon {
  background: color-mix(
    in srgb,
    var(--text-box-focus-add-circle-bg) 78%,
    var(--text-box-focus-on-surface) 22%
  );
}

.text-box-focus-tabs .text-box-focus-add-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--text-box-focus-note-control-size);
  height: var(--text-box-focus-note-control-size);
  border-radius: 999px;
  background: var(--text-box-focus-add-circle-bg);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: background-color 150ms ease;
}

.text-box-focus-tabs .text-box-focus-add-icon::before,
.text-box-focus-tabs .text-box-focus-add-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.text-box-focus-tabs .text-box-focus-add-icon::before {
  width: 16px;
  height: 1.7px;
}

.text-box-focus-tabs .text-box-focus-add-icon::after {
  width: 1.7px;
  height: 16px;
}

.text-box-focus-overlay.settled .text-box-focus-tabs .text-box-focus-add-field {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--tab-open-delay, 0ms);
}

.text-box-focus-overlay.settled .text-box-focus-tab.newly-added {
  animation: text-box-focus-new-tab 430ms var(--ui-load-ease-out) both;
}

.text-box-focus-overlay.settled .text-box-focus-tab.deleting {
  pointer-events: none;
  overflow: hidden;
  animation: text-box-focus-delete-tab 240ms ease both;
}

@keyframes text-box-focus-new-tab {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  56% {
    opacity: 1;
    transform: translateY(-3px) scale(1.018);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes text-box-focus-delete-tab {
  0% {
    min-height: 84px;
    margin-block: 0;
    padding-top: 11px;
    padding-bottom: 10px;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  54% {
    min-height: 84px;
    margin-block: 0;
    padding-top: 11px;
    padding-bottom: 10px;
    opacity: 0;
    transform: translateY(-8px) scale(0.965);
  }
  100% {
    min-height: 0;
    margin-block: -12px;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-8px) scale(0.965);
  }
}

.text-box-focus-overlay.closing .text-box-focus-tabs .text-box-focus-add-field,
.text-box-focus-overlay.closing-tabs .text-box-focus-tabs .text-box-focus-add-field {
  opacity: 0;
  transform: translateY(12px) scale(0.975);
  transition-delay: var(--tab-close-delay, 0ms);
  transition-duration: 100ms, 170ms, 90ms, 90ms;
}

.text-box-focus-tabs.no-stagger .text-box-focus-add-field {
  transition-delay: 0ms !important;
}

.text-box-focus-tabs.top-row .text-box-focus-add-field {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 148px;
  min-width: 148px;
  min-height: 72px;
  border-radius: 16px;
  transform: translateY(-8px);
}

.text-box-focus-tabs.top-row .text-box-focus-add-field::before {
  display: none;
}

.text-box-focus-tabs.top-row .text-box-focus-add-icon {
  width: var(--text-box-focus-note-control-size);
  height: var(--text-box-focus-note-control-size);
}

.text-box-focus-tabs.top-row .text-box-focus-add-icon::before {
  width: 16px;
  height: 1.7px;
}

.text-box-focus-tabs.top-row .text-box-focus-add-icon::after {
  width: 1.7px;
  height: 16px;
}

.text-box-focus-overlay.settled .text-box-focus-tabs.top-row .text-box-focus-add-field {
  transform: translateY(0) scale(1);
}

.text-box-focus-overlay.closing .text-box-focus-tabs.top-row .text-box-focus-add-field,
.text-box-focus-overlay.closing-tabs .text-box-focus-tabs.top-row .text-box-focus-add-field {
  transform: translateY(-8px) scale(0.975);
}

.text-box-focus-tab-menu {
  position: fixed;
  z-index: 120;
  display: flex;
  gap: 5px;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 999px;
  background: var(--ui-picker-bg, color-mix(in srgb, var(--bg) 94%, var(--fg) 6%));
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -2px, 0) scale(0.985);
  transform-origin: left top;
  transition:
    opacity 120ms ease,
    transform 160ms var(--ui-load-ease-out);
}

.text-box-focus-tab-menu.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.text-box-focus-tab-menu-action {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  background: color-mix(in srgb, #ffffff 42%, transparent);
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font-family: "geogeoVF", "geogeo-Regular", "SF Mono", "Menlo", monospace;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "wdth" 630;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.text-box-focus-tab-menu-action:hover,
.text-box-focus-tab-menu-action:focus-visible {
  background: color-mix(in srgb, #ffffff 74%, transparent);
  color: var(--fg);
  outline: none;
}

.text-box-focus-tab-menu-action-delete:hover,
.text-box-focus-tab-menu-action-delete:focus-visible {
  color: var(--sketch);
}

.text-box-focus-add-box {
  display: none;
  min-height: 54px;
  margin-top: 0;
  background: var(--text-box-focus-field-bg);
}

.text-box-focus-add-box::before,
.text-box-focus-add-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text-box-focus-add-box::before {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--svg-add-plus) center / contain no-repeat;
  mask: var(--svg-add-plus) center / contain no-repeat;
}

.text-box-focus-add-box::after {
  display: none;
}

.text-box-focus-close {
  --text-box-focus-control-enter-y: -18px;
  --text-box-focus-control-exit-y: -12px;
  --text-box-focus-close-circle-bg: color-mix(
    in srgb,
    var(--text-box-focus-on-surface) 12%,
    var(--text-box-focus-field-bg) 88%
  );
  position: fixed;
  z-index: 12;
  width: var(--text-box-focus-note-control-size);
  height: var(--text-box-focus-note-control-size);
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--text-box-focus-close-circle-bg);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.text-box-focus-close::before,
.text-box-focus-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
}

.text-box-focus-close::before {
  width: 16px;
  height: 1.7px;
  transform: translate(-50%, -50%);
}

.text-box-focus-close::after {
  width: 1.7px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.text-box-focus-close::before,
.text-box-focus-close::after {
  transform-origin: center center;
}

.text-box-focus-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.text-box-focus-close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.text-box-focus-close:hover,
.text-box-focus-close:focus-visible {
  background: color-mix(
    in srgb,
    var(--text-box-focus-close-circle-bg) 78%,
    var(--text-box-focus-on-surface) 22%
  );
  color: #fff;
}

.text-box-focus-fields {
  display: flex;
  flex-direction: column;
  gap: var(--text-box-focus-field-gap);
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
  opacity: 1;
  transform: none;
  transition:
    gap var(--text-box-focus-duration) var(--ui-load-ease),
    opacity 180ms ease;
}

.text-box-focus-fields::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.text-box-focus-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--text-box-focus-list-row-gap);
  align-items: start;
  min-width: 0;
  border-radius: var(--text-box-focus-field-radius);
  padding:
    var(--text-box-focus-list-row-pad-y)
    var(--text-box-focus-list-row-pad-x);
  background: var(--text-box-focus-field-bg);
  transition:
    gap var(--text-box-focus-duration) var(--ui-load-ease),
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-check {
  position: relative;
  width: var(--text-box-focus-list-marker-size);
  height: var(--text-box-focus-list-marker-size);
  margin: var(--text-box-focus-list-marker-margin-top) 0 0;
  border: var(--text-box-focus-list-marker-border-width) solid var(--text-box-focus-accent);
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--text-box-focus-accent);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    width var(--text-box-focus-duration) var(--ui-load-ease),
    height var(--text-box-focus-duration) var(--ui-load-ease),
    margin var(--text-box-focus-duration) var(--ui-load-ease),
    border-width var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-check.checked {
  background: color-mix(in srgb, var(--text-box-focus-accent) 12%, transparent);
}

.text-box-focus-check::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.text-box-focus-check.checked::before {
  opacity: 1;
}

.text-box-focus-list-row .text-box-focus-field {
  min-width: 0;
  min-height: var(--text-box-focus-list-field-min-height);
  padding: 6px 0;
  background: transparent;
}

.text-box-focus-field-wrap {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}

.text-box-focus-field-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  background: var(--text-box-focus-field-bg);
  opacity: 1;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    border-radius var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-field-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 40px;
  border-radius: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text-box-focus-field-bg) 0%, transparent),
    var(--text-box-focus-field-bg) 82%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.text-box-focus-field-wrap.scroll-fade-visible::after {
  opacity: 1;
}

.text-box-focus-list-row .text-box-focus-field-wrap::before {
  opacity: 0;
}

.text-box-focus-list-row .text-box-focus-field-wrap::after {
  display: none;
}

.text-box-focus-title-fade {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--text-box-focus-title-fade-top, 0px);
  z-index: 2;
  height: var(--text-box-focus-title-fade-height, 42px);
  background: linear-gradient(
    to bottom,
    var(--text-box-focus-field-bg) 0%,
    var(--text-box-focus-field-bg) var(--text-box-focus-title-fade-solid-stop, 72%),
    color-mix(in srgb, var(--text-box-focus-field-bg) 88%, transparent),
    color-mix(in srgb, var(--text-box-focus-field-bg) 0%, transparent)
  );
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    top var(--text-box-focus-duration) var(--ui-load-ease),
    height var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-field-wrap-title-pinned.text-box-focus-title-fade-visible
  .text-box-focus-title-fade {
  opacity: 1;
}

.text-box-focus-dom-line-title {
  z-index: 4;
}

.text-box-focus-dom-line-body {
  z-index: 0;
}

.text-box-focus-field-display {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  min-height: var(--text-box-focus-field-min-height);
  border-radius: 0;
  padding:
    var(--text-box-focus-field-pad-y)
    var(--text-box-focus-field-pad-x);
  overflow: hidden;
  pointer-events: none;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
  background: var(--text-box-focus-field-bg);
  color: var(--text-box-focus-field-fg);
  font-family: var(--text-box-focus-font-family);
  font-feature-settings: "ss02" 1;
  font-style: normal;
  font-weight: var(--text-box-focus-font-weight);
  font-variation-settings: var(--text-box-focus-font-variation-settings);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-size: var(--text-box-focus-field-font-size);
  line-height: var(--text-box-focus-field-line-height);
  letter-spacing: var(--text-box-focus-field-letter-spacing);
  transition:
    opacity var(--text-box-focus-text-fade-in-duration) var(--ui-load-ease-out),
    min-height var(--text-box-focus-duration) var(--ui-load-ease),
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease),
    font-size var(--text-box-focus-duration) var(--ui-load-ease),
    line-height var(--text-box-focus-duration) var(--ui-load-ease),
    letter-spacing var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-field-dom-display {
  z-index: auto;
}

.text-box-focus-dom-line {
  position: absolute;
  white-space: pre;
}

.text-box-focus-field-canvas {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--text-box-focus-field-fg);
  transition: opacity var(--text-box-focus-text-fade-in-duration) var(--ui-load-ease-out);
}

.text-box-focus-overlay.text-fade-hidden .text-box-focus-field-canvas,
.text-box-focus-overlay.text-fade-hidden .text-box-focus-field-dom-display {
  opacity: 0;
  transition-duration: var(--text-box-focus-text-fade-out-duration);
  transition-timing-function: ease;
}

.text-box-focus-overlay.opening:not(.text-reveal-ready) .text-box-focus-field-canvas,
.text-box-focus-overlay.opening:not(.text-reveal-ready) .text-box-focus-field-dom-display,
.text-box-focus-overlay.opening:not(.text-reveal-ready) .text-box-focus-title-fade {
  opacity: 0 !important;
  transition: none !important;
}

.text-box-focus-overlay.text-fade-hidden .text-box-focus-title-fade {
  opacity: 0 !important;
  transition: opacity var(--text-box-focus-text-fade-out-duration) ease !important;
}

.text-box-focus-overlay.opening.text-reveal-ready .text-box-focus-title-fade {
  transition:
    top var(--text-box-focus-duration) var(--ui-load-ease),
    height var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-overlay.closing .text-box-focus-field-display {
  background: transparent;
}

.text-box-focus-overlay.closing .text-box-focus-title-fade {
  opacity: 0 !important;
}

.text-box-focus-overlay.closing .text-box-focus-fields,
.text-box-focus-overlay.closing .text-box-focus-list-row,
.text-box-focus-overlay.closing .text-box-focus-check,
.text-box-focus-overlay.closing .text-box-focus-field-wrap::before,
.text-box-focus-overlay.closing .text-box-focus-title-fade,
.text-box-focus-overlay.closing .text-box-focus-field-display,
.text-box-focus-overlay.closing .text-box-focus-field {
  transition-delay: 0ms !important;
}

.text-box-focus-overlay.closing .text-box-focus-fields {
  overflow: hidden;
}

.text-box-focus-overlay.closing .text-box-focus-field-wrap,
.text-box-focus-overlay.closing .text-box-focus-list-row:last-child {
  flex: 1 1 auto;
  min-height: 0;
}

.text-box-focus-overlay.closing .text-box-focus-list-row:last-child .text-box-focus-field-wrap {
  height: 100%;
}

.text-box-focus-overlay.closing .text-box-focus-field,
.text-box-focus-overlay.closing .text-box-focus-field-display {
  height: 100% !important;
  min-height: 0 !important;
}

.text-box-focus-overlay.closing .text-box-focus-field {
  transition:
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease),
    font-size var(--text-box-focus-duration) var(--ui-load-ease),
    line-height var(--text-box-focus-duration) var(--ui-load-ease),
    letter-spacing var(--text-box-focus-duration) var(--ui-load-ease) !important;
}

.text-box-focus-overlay.closing .text-box-focus-field-display {
  transition:
    opacity var(--text-box-focus-text-fade-in-duration) var(--ui-load-ease-out),
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease),
    font-size var(--text-box-focus-duration) var(--ui-load-ease),
    line-height var(--text-box-focus-duration) var(--ui-load-ease),
    letter-spacing var(--text-box-focus-duration) var(--ui-load-ease) !important;
}

.text-box-focus-overlay.text-fade-hidden .text-box-focus-field {
  transition: none !important;
}

.text-box-focus-overlay.text-fade-hidden .text-box-focus-field-display {
  transition: opacity var(--text-box-focus-text-fade-out-duration) ease !important;
}

.text-box-focus-list-row .text-box-focus-field-display {
  min-height: var(--text-box-focus-list-field-min-height);
  padding: 6px 0;
  background: transparent;
}

.text-box-focus-list-row .text-box-focus-field-canvas {
  min-height: 0;
  padding: 0;
}

.text-box-focus-field {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: var(--text-box-focus-field-min-height);
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  margin: 0;
  padding:
    var(--text-box-focus-field-pad-y)
    var(--text-box-focus-field-pad-x);
  background: transparent;
  background-clip: padding-box;
  color: transparent;
  caret-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--text-box-focus-font-family);
  font-feature-settings: "ss02" 1;
  font-style: normal;
  font-weight: var(--text-box-focus-font-weight);
  font-variation-settings: var(--text-box-focus-font-variation-settings);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-size: var(--text-box-focus-field-font-size);
  line-height: var(--text-box-focus-field-line-height);
  letter-spacing: var(--text-box-focus-field-letter-spacing);
  hyphens: manual;
  -webkit-hyphens: manual;
  resize: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  vertical-align: top;
  overflow-anchor: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition:
    height var(--text-box-focus-duration) var(--ui-load-ease),
    min-height var(--text-box-focus-duration) var(--ui-load-ease),
    padding var(--text-box-focus-duration) var(--ui-load-ease),
    border-radius var(--text-box-focus-duration) var(--ui-load-ease),
    font-size var(--text-box-focus-duration) var(--ui-load-ease),
    line-height var(--text-box-focus-duration) var(--ui-load-ease),
    letter-spacing var(--text-box-focus-duration) var(--ui-load-ease);
}

.text-box-focus-field::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.webkit-text-platform .drag-tool-icon-text,
body.webkit-text-platform .note-focus-title,
body.webkit-text-platform .note-focus-body,
body.webkit-text-platform .note-focus-text-mirror,
body.webkit-text-platform .text-box-dom-field,
body.webkit-text-platform .text-box-dom-measure,
body.webkit-text-platform .text-box-inline-editor,
body.webkit-text-platform .text-box-classic-caret-mirror,
body.webkit-text-platform .text-box-focus-tab-label,
body.webkit-text-platform .text-box-focus-field-display,
body.webkit-text-platform .text-box-focus-field {
  -webkit-font-smoothing: auto;
  text-rendering: auto;
}

.text-box-focus-add-field {
  --text-box-focus-control-enter-y: 22px;
  --text-box-focus-control-exit-y: 16px;
  position: fixed;
  z-index: 3;
  width: var(--canvas-control-circle-size, 42px);
  height: var(--canvas-control-circle-size, 42px);
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--text-box-focus-control-green);
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
}

.text-box-focus-add-field::before,
.text-box-focus-add-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: currentColor;
}

.text-box-focus-add-field::before {
  width: var(--text-box-focus-control-icon-length);
  height: var(--text-box-focus-control-stroke);
}

.text-box-focus-add-field::after {
  width: var(--text-box-focus-control-stroke);
  height: var(--text-box-focus-control-icon-length);
}

.text-box-focus-close:focus,
.text-box-focus-close:focus-visible,
.text-box-focus-field:focus,
.text-box-focus-check:focus,
.text-box-focus-check:focus-visible,
.text-box-focus-add-field:focus,
.text-box-focus-add-field:focus-visible {
  outline: none;
  box-shadow: none;
}

.text-box-focus-add-field:hover,
.text-box-focus-add-field:focus-visible {
  background: color-mix(in srgb, var(--text-box-focus-control-green) 72%, transparent);
}

@media (max-width: 700px) {
  .text-box-focus-overlay {
    --text-box-focus-note-control-size: 24px;
  }

  .note-focus-panel {
    --note-focus-gap: 10px;
    --note-focus-pad-x: 18px;
    --note-focus-pad-y: 30px;
    --note-focus-title-size: 25px;
    --note-focus-title-line-height: 30.5px;
    --note-focus-title-pad-y: 6px;
    --note-focus-title-extra-y: 4px;
    --note-focus-body-size: 16px;
    --note-focus-body-line-height: 24.8px;
  }

  .text-box-focus-panel {
    --text-box-focus-shell-pad-x: 24px;
    --text-box-focus-shell-pad-top: 58px;
    --text-box-focus-shell-pad-bottom: 52px;
    padding:
      var(--text-box-focus-shell-pad-top)
      var(--text-box-focus-shell-pad-x)
      var(--text-box-focus-shell-pad-bottom);
  }

  .text-box-focus-tabs {
    min-height: 70px;
    padding: 0;
    overflow: hidden;
    transform: translateY(-8px);
  }

  .text-box-focus-tabs-scroll {
    flex-direction: row;
    gap: 10px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .text-box-focus-overlay.settled .text-box-focus-tabs,
  .text-box-focus-overlay.closing .text-box-focus-tabs {
    transform: translateY(0);
  }

  .text-box-focus-tab {
    width: 132px;
    min-width: 132px;
    min-height: 58px;
    border-width: 1px;
    border-radius: 16px;
    padding: 7px 10px 8px;
    transform: translateY(-8px);
  }

  .fullscreen-search {
    --fullscreen-search-width: min(232px, calc(100% - 28px));
  }

  .text-box-focus-close,
  .text-box-focus-add-field,
  .text-box-focus-search {
    width: var(--canvas-control-circle-size, 46px);
    height: var(--canvas-control-circle-size, 46px);
  }

  .text-box-focus-close {
    width: 24px;
    height: 24px;
  }

  .text-box-focus-add-field {
    width: 40px;
    height: 40px;
  }

  .text-box-focus-tabs .text-box-focus-add-field {
    position: relative;
    bottom: auto;
    width: 132px;
    min-width: 132px;
    height: auto;
    min-height: 58px;
    border-radius: 16px;
    transform: translateY(-8px);
  }

  .text-box-focus-tabs .text-box-focus-add-field::before {
    display: none;
  }

  .text-box-focus-tabs .text-box-focus-add-icon {
    width: var(--text-box-focus-note-control-size);
    height: var(--text-box-focus-note-control-size);
  }

  .text-box-focus-tabs .text-box-focus-add-icon::before {
    width: 14px;
    height: 1.5px;
  }

  .text-box-focus-tabs .text-box-focus-add-icon::after {
    width: 1.5px;
    height: 14px;
  }

  .text-box-focus-overlay.settled .text-box-focus-tabs .text-box-focus-add-field {
    transform: translateY(0) scale(1);
  }

  .text-box-focus-overlay.closing .text-box-focus-tabs .text-box-focus-add-field,
  .text-box-focus-overlay.closing-tabs .text-box-focus-tabs .text-box-focus-add-field {
    transform: translateY(-8px) scale(0.975);
  }

  .text-box-focus-add-field::before {
    width: 16px;
    height: var(--text-box-focus-control-stroke);
  }

  .text-box-focus-add-field::after {
    width: var(--text-box-focus-control-stroke);
    height: 16px;
  }

  .text-box-focus-search {
    --fullscreen-search-collapsed-size: var(--canvas-control-circle-size, 46px);
    --fullscreen-search-width: min(224px, calc(100% - 28px));
    --fullscreen-search-padding-left-collapsed: 10px;
    --fullscreen-search-padding-right-collapsed: 11px;
    right: 16px;
    bottom: 16px;
  }

  .text-box-focus-overlay.settled .text-box-focus-tab {
    transform: translateY(0);
  }

  .text-box-focus-overlay.closing .text-box-focus-tab {
    transform: translateY(-8px);
  }

  .text-box-focus-tab-label {
    max-height: 26px;
    font-size: 10.5px;
  }

  .text-box-focus-tab-date {
    margin-bottom: 5px;
    font-size: 10.5px;
  }

  .text-box-focus-add-box {
    min-height: 38px;
    margin-top: 0;
  }

  .text-box-focus-field {
    min-height: var(--text-box-focus-field-min-height);
    padding:
      var(--text-box-focus-field-pad-y)
      var(--text-box-focus-field-pad-x);
    font-size: var(--text-box-focus-field-font-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .write-layer,
  .note-fullscreen-control,
  .note-focus-overlay,
  .note-focus-panel,
  .note-focus-close,
  .note-focus-search,
  .note-focus-title,
  .note-focus-body,
  .text-box-inline-editor,
  .text-box-focus-overlay,
  .text-box-focus-panel,
  .text-box-focus-close,
  .text-box-focus-search,
  .text-box-focus-tabs,
  .text-box-focus-tab,
  .text-box-focus-fields,
  .text-box-focus-list-row,
  .text-box-focus-check,
  .text-box-focus-field,
  .text-box-focus-add-field {
    transition: none;
  }

  body.notes-page-exiting .app,
  body.notes-page-exiting .drag-tool-dots,
  body.notes-page-exiting .grid-element-picker,
  body.notes-page-exiting .image-upload-button,
  body.notes-page-exiting .voice-record-button,
  body.notes-page-exiting .phone-keyboard-button,
  body.notes-page-exiting .phone-stress-test-button {
    transform: none;
    transition: none;
  }
}