.editor-toolbar {
  overflow-x: auto;
  padding: 4px 14px;
  background: var(--surface);
  scrollbar-width: thin;
}

.editor-tools {
  display: flex;
  width: max-content;
  min-width: 100%;
  align-items: center;
  gap: 6px;
}

.editor-tools button,
.tool-select {
  min-height: var(--target);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.editor-tools button {
  padding: 8px 12px;
  cursor: pointer;
}

.editor-tools button[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: var(--accent);
  color: var(--accent-ink);
}

.tool-select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.tool-select select {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.ink-tools {
  display: none;
  align-items: center;
  gap: 6px;
}

.editor-root[data-editor-mode="canvas"] .ink-tools,
.editor-pane[data-editor-mode="canvas"] .ink-tools {
  display: inline-flex;
}

.editor-stage {
  position: relative;
  min-height: 70vh;
}

.text-editor {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  font-size: 20px;
  line-height: 1.8;
  outline: none;
  overflow-wrap: anywhere;
}

.text-editor > :first-child {
  margin-top: 0;
}

.text-editor p,
.text-editor h1,
.text-editor h2,
.text-editor li {
  position: relative;
  min-height: 1.8em;
}

.editor-root[data-editor-mode="highlight"] .text-editor,
.editor-root[data-editor-mode="canvas"] .text-editor {
  caret-color: transparent;
}

.editor-root[data-editor-mode="highlight"] .text-editor {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}

.ink-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.editor-root[data-editor-mode="canvas"] .ink-canvas {
  pointer-events: auto;
  cursor: crosshair;
}

mark.jp-highlight {
  border-radius: 0.16em;
  padding: 0 0.05em;
  background: var(--highlight);
  color: inherit;
}

.jn-font-12 { font-size: 12px; }
.jn-font-14 { font-size: 14px; }
.jn-font-16 { font-size: 16px; }
.jn-font-18 { font-size: 18px; }
.jn-font-20 { font-size: 20px; }
.jn-font-24 { font-size: 24px; }
.jn-font-28 { font-size: 28px; }
.jn-font-32 { font-size: 32px; }
.jn-font-40 { font-size: 40px; }

ruby rt {
  color: var(--muted);
  font-size: 0.55em;
}

@media (max-width: 1023px), (orientation: portrait) {
  .text-editor {
    font-size: 18px;
  }
}