/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  :root {
    --accent-base: #7c2a2e;
    --accent: var(--accent-base);
    --tint: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --tint: color-mix(in srgb, var(--accent) 12%, transparent);
    }
  }

  :root {
    --tint-strong: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --tint-strong: color-mix(in srgb, var(--accent) 22%, transparent);
    }
  }

  :root {
    --surface: #fafaf9;
    --surface-raised: #fff;
    --surface-sunken: #f5f5f4;
    --bar: #f0efed;
    --ground: #e9e7e3;
    --border-subtle: #e7e5e4;
    --hair: #dcdad7;
    --rule: var(--ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root {
      --rule: color-mix(in srgb, var(--ink) 7%, transparent);
    }
  }

  :root {
    --ink: #1c1917;
    --ink-muted: #78716c;
    --ink-faint: #a8a29e;
    --ink-label: #6e6763;
    --shadow-page: 0 1px 2px #0000000d, 0 12px 32px #00000012;
    --shadow-pop: 0 12px 36px #00000029;
    --shadow-control: 0 1px 1px #0000000d;
    --topbar-h: 52px;
    --controls-w: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
    --radius: 7px;
  }

  .dark {
    --accent: var(--accent-base);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark {
      --accent: color-mix(in srgb, var(--accent-base) 55%, #fff);
    }
  }

  .dark {
    --surface: #0c0a09;
    --surface-raised: #1c1917;
    --surface-sunken: #171412;
    --bar: #1f1c1a;
    --ground: #151311;
    --border-subtle: #292524;
    --hair: #33302d;
    --rule: #ffffff14;
    --ink: #f5f5f4;
    --ink-muted: #a8a29e;
    --ink-faint: #78716c;
    --ink-label: #b9b3ae;
    --shadow-page: none;
    --shadow-pop: 0 12px 36px #00000080;
  }

  html, body, #root {
    height: 100%;
  }

  body {
    background-color: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    font-size: 13px;
  }

  input, textarea, [contenteditable], .selectable {
    -webkit-user-select: text;
    user-select: text;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
}

@layer components;

@layer utilities {
  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

  .underline {
    text-decoration-line: underline;
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100;
  src: local(""), url("./inter-v12-latin-100-BQDzDElq.woff2") format("woff2"), url("./inter-v12-latin-100-46Mq0mOp.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  src: local(""), url("./inter-v12-latin-200-BxfrU12A.woff2") format("woff2"), url("./inter-v12-latin-200-DXfqWPZg.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  src: local(""), url("./inter-v12-latin-300-DEbyFmpd.woff2") format("woff2"), url("./inter-v12-latin-300-f7r92Nkj.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  src: local(""), url("./inter-v12-latin-regular-YtgfLPRn.woff2") format("woff2"), url("./inter-v12-latin-regular-CahmJf_6.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  src: local(""), url("./inter-v12-latin-500-DfX5FI9E.woff2") format("woff2"), url("./inter-v12-latin-500-BQ2gQN_M.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  src: local(""), url("./inter-v12-latin-600-BvOeHRLc.woff2") format("woff2"), url("./inter-v12-latin-600-D01NXWOK.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  src: local(""), url("./inter-v12-latin-700-Bj1B9WKG.woff2") format("woff2"), url("./inter-v12-latin-700-B5TOIllR.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  src: local(""), url("./inter-v12-latin-800-Bdy4lAMa.woff2") format("woff2"), url("./inter-v12-latin-800-DFVvDWwT.woff") format("woff");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  src: local(""), url("./inter-v12-latin-900-CMga-52B.woff2") format("woff2"), url("./inter-v12-latin-900-ORHAl5ZU.woff") format("woff");
}

.bn-block-outer {
  line-height: 1.5;
  transition: margin .2s;
}

.bn-block {
  flex-direction: column;
  display: flex;
}

.bn-block-content {
  width: 100%;
  padding: 3px 0;
  transition: font-size .2s;
  display: flex;
}

.bn-block-content.ProseMirror-selectednode > *, .ProseMirror-selectednode > .bn-block-content > *, .bn-block-content .ProseMirror-selectednode, .bn-inline-content .ProseMirror-selectednode {
  position: relative;
}

.bn-block-content.ProseMirror-selectednode > :after, .ProseMirror-selectednode > .bn-block-content > :after, .bn-block-content .ProseMirror-selectednode:after, .bn-inline-content .ProseMirror-selectednode:after {
  content: "";
  pointer-events: none;
  background-color: #64a0ff14;
  border-radius: 4px;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 4px #64a0ff4d;
}

.bn-block-content:before {
  content: "";
  height: 0;
  margin-right: 0;
  transition: all .2s;
  overflow: visible;
}

.bn-inline-content {
  white-space: pre-wrap;
}

.bn-trailing-block {
  cursor: text;
  -webkit-user-select: none;
  user-select: none;
  height: 30px;
}

.bn-block-group .bn-block-group {
  margin-left: 24px;
}

.bn-block-group .bn-block-group > .bn-block-outer {
  position: relative;
}

.bn-block-group .bn-block-group > .bn-block-outer:not([data-prev-depth-changed]):before {
  content: " ";
  height: 100%;
  transition: all .2s .1s;
  display: inline;
  position: absolute;
  left: -20px;
}

.bn-block-group .bn-block-group > .bn-block-outer[data-prev-depth-change="-2"]:before {
  height: 0;
}

.bn-inline-content code {
  font-family: monospace;
}

[data-prev-depth-change="1"] {
  --x: 1;
}

[data-prev-depth-change="2"] {
  --x: 2;
}

[data-prev-depth-change="3"] {
  --x: 3;
}

[data-prev-depth-change="4"] {
  --x: 4;
}

[data-prev-depth-change="5"] {
  --x: 5;
}

[data-prev-depth-change="-1"] {
  --x: -1;
}

[data-prev-depth-change="-2"] {
  --x: -2;
}

[data-prev-depth-change="-3"] {
  --x: -3;
}

[data-prev-depth-change="-4"] {
  --x: -4;
}

[data-prev-depth-change="-5"] {
  --x: -5;
}

.bn-block-outer[data-prev-depth-change] {
  margin-left: calc(10px * var(--x));
}

.bn-block-outer[data-prev-depth-change] .bn-block-outer[data-prev-depth-change] {
  margin-left: 0;
}

[data-content-type="heading"] {
  --level: 3em;
  padding-top: 18px;
}

[data-content-type="heading"][data-level="2"] {
  --level: 2em;
}

[data-content-type="heading"][data-level="3"] {
  --level: 1.3em;
}

[data-content-type="heading"][data-level="4"] {
  --level: 1em;
}

[data-content-type="heading"][data-level="5"] {
  --level: .9em;
}

[data-content-type="heading"][data-level="6"] {
  --level: .8em;
}

[data-prev-level="1"] {
  --prev-level: 3em;
}

[data-prev-level="2"] {
  --prev-level: 2em;
}

[data-prev-level="3"] {
  --prev-level: 1.3em;
}

[data-prev-level="4"] {
  --prev-level: 1em;
}

[data-prev-level="5"] {
  --prev-level: .9em;
}

[data-prev-level="6"] {
  --prev-level: .8em;
}

.bn-block-outer[data-prev-type="heading"] > .bn-block > .bn-block-content {
  font-size: var(--prev-level);
  font-weight: 700;
}

.bn-block-outer:not([data-prev-type]) > .bn-block > .bn-block-content[data-content-type="heading"], .bn-block-outer:not([data-prev-type]) > .bn-block > div[data-type="modification"] > div[data-type="modification"] > .bn-block-content[data-content-type="heading"], .bn-block-outer:not([data-prev-type]) > .bn-block > :is(ins, del) > .bn-suggestion-node > .bn-block-content[data-content-type="heading"] {
  font-size: var(--level);
  font-weight: 700;
}

[data-content-type="quote"] blockquote {
  color: #7d797a;
  border-left: 2px solid #7d797a;
  margin: 0;
  padding-left: 1em;
}

[data-content-type="divider"] hr {
  border: none;
  border-top: 1px solid #7d797a;
  flex: 1;
  margin: .5em 0;
}

.bn-block-content:before {
  content: "";
  margin-right: 0;
}

.bn-block-content[data-content-type="numberedListItem"]:before {
  justify-content: center;
  min-width: 24px;
  padding-right: 4px;
  display: flex;
}

[data-content-type="numberedListItem"] {
  --index: attr(data-index);
}

[data-prev-type="numberedListItem"] {
  --prev-index: attr(data-prev-index);
}

.bn-block-outer[data-prev-type="numberedListItem"]:not([data-prev-index="none"]) > .bn-block > .bn-block-content:before {
  content: var(--prev-index) ".";
}

.bn-block-outer:not([data-prev-type]) > .bn-block > .bn-block-content[data-content-type="numberedListItem"]:before, .bn-block-outer:not([data-prev-type]) > .bn-block > div[data-type="modification"] > .bn-block-content[data-content-type="numberedListItem"]:before, .bn-block-outer:not([data-prev-type]) > .bn-block > :is(ins, del) > .bn-suggestion-node > .bn-block-content[data-content-type="numberedListItem"]:before {
  content: var(--index) ".";
}

.bn-block-content[data-content-type="bulletListItem"]:before {
  justify-content: center;
  min-width: 24px;
  padding-right: 4px;
  display: flex;
}

.bn-block-content[data-content-type="checkListItem"] > div:has( > input) {
  height: 24px;
}

.bn-block-content[data-content-type="checkListItem"] > div > input {
  cursor: pointer;
  margin-left: 4px;
  margin-right: 8px;
  width: 12px;
  height: 24px;
  margin-block: 0;
}

.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
  text-decoration: line-through;
}

.bn-block-content[data-text-alignment="center"] {
  justify-content: center;
}

.bn-block-content[data-text-alignment="right"] {
  justify-content: flex-end;
}

:is(.bn-block:has( > .bn-block-content > div > .bn-toggle-wrapper[data-show-children="false"]) > .bn-block-group, .bn-block:has( > .react-renderer > .bn-block-content > div > .bn-toggle-wrapper[data-show-children="false"]) > .bn-block-group) {
  display: none;
}

.bn-toggle-wrapper {
  align-items: center;
  display: flex;
}

.bn-toggle-button {
  color: var(--bn-colors-editor-text);
  padding: 3px;
}

.bn-toggle-button > svg {
  width: 18px;
  height: 18px;
}

.bn-toggle-wrapper[data-show-children="true"] .bn-toggle-button {
  transform: rotate(90deg);
}

.bn-toggle-add-block-button {
  color: var(--bn-colors-side-menu);
  width: fit-content;
  margin-left: 22px;
  padding-inline: 2px;
  font-size: 16px;
  font-weight: 400;
}

.bn-toggle-button, .bn-toggle-add-block-button {
  border-radius: var(--bn-border-radius-small);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: none;
  display: flex;
}

.bn-toggle-button:hover, .bn-toggle-add-block-button:hover {
  background-color: var(--bn-colors-hovered-background);
}

.bn-block-outer[data-prev-type="bulletListItem"] > .bn-block > .bn-block-content:before, .bn-block-outer:not([data-prev-type]) > .bn-block > .bn-block-content[data-content-type="bulletListItem"]:before, .bn-block-outer:not([data-prev-type]) > .bn-block > div[data-type="modification"] > .bn-block-content[data-content-type="bulletListItem"]:before, .bn-block-outer:not([data-prev-type]) > .bn-block > :is(ins, del) > .bn-suggestion-node .bn-block-content[data-content-type="bulletListItem"]:before {
  content: "•";
}

[data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer[data-prev-type="bulletListItem"] > .bn-block > .bn-block-content:before, [data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer:not([data-prev-type]) > .bn-block > .bn-block-content[data-content-type="bulletListItem"]:before, [data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer:not([data-prev-type]) > .bn-block > div[data-type="modification"] > .bn-block-content[data-content-type="bulletListItem"]:before {
  content: "◦";
}

[data-content-type="bulletListItem"] ~ .bn-block-group [data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer[data-prev-type="bulletListItem"] > .bn-block > .bn-block-content:before, [data-content-type="bulletListItem"] ~ .bn-block-group [data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer:not([data-prev-type]) > .bn-block > .bn-block-content[data-content-type="bulletListItem"]:before, [data-content-type="bulletListItem"] ~ .bn-block-group [data-content-type="bulletListItem"] ~ .bn-block-group > .bn-block-outer:not([data-prev-type]) > .bn-block > div[data-type="modification"] > .bn-block-content[data-content-type="bulletListItem"]:before {
  content: "▪︎";
}

.bn-block-content[data-content-type="codeBlock"] {
  color: #fff;
  background-color: #161616;
  border-radius: 8px;
  position: relative;
}

.bn-block-content[data-content-type="codeBlock"] > pre {
  white-space: pre;
  tab-size: 2;
  width: 100%;
  margin: 0;
  padding: 24px;
  overflow-x: auto;
}

.bn-block-content[data-content-type="codeBlock"] > div {
  outline: none !important;
}

.bn-block-content[data-content-type="codeBlock"] > div > select {
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  background-color: #0000;
  border: none;
  font-size: .8em;
  transition: opacity .3s 1s;
  position: absolute;
  top: 8px;
  left: 18px;
  outline: none !important;
}

.bn-block-content[data-content-type="codeBlock"] > div > select > option {
  color: #000;
}

.bn-block-content[data-content-type="codeBlock"]:hover > div > select, .bn-block-content[data-content-type="codeBlock"] > div > select:focus {
  opacity: .5;
  transition-delay: .1s;
}

.bn-block-content[data-content-type="codeBlock"]:has(.bn-preview-with-source-popup) {
  color: inherit;
  background-color: #0000;
}

.shiki {
  color: var(--shiki-dark);
}

.bn-source-block-popup .shiki {
  color: var(--shiki-light);
}

.bn-root[data-color-scheme="dark"] .bn-source-block-popup .shiki {
  color: var(--shiki-dark);
}

.bn-preview-with-source-popup {
  position: relative;
}

.bn-block-content .bn-preview-with-source-popup {
  width: 100%;
  padding: 12px;
  display: flex;
}

.bn-inline-content-section .bn-preview-with-source-popup {
  width: fit-content;
  padding: 0;
  display: inline-block;
}

.bn-preview-container {
  anchor-name: --bn-source-popup-anchor;
  cursor: pointer;
}

.bn-block-content .bn-preview-container {
  width: 100%;
  overflow: auto;
}

.bn-inline-content-section .bn-preview-container {
  width: fit-content;
  overflow: visible;
}

.bn-block-content .bn-preview-container .katex-html:has( > .tag) {
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  padding-right: 2.5em;
}

.bn-source-block-popup {
  box-shadow: none;
  color: #0000;
  z-index: 0;
  background-color: #0000;
  border: none;
  border-radius: 0;
  width: 0;
  height: 0;
  margin-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  overflow: clip;
}

.bn-preview-with-source-popup[data-open="true"] .bn-source-block-popup {
  background-color: var(--bn-colors-menu-background);
  border: var(--bn-border);
  border-radius: var(--bn-border-radius-medium);
  box-shadow: var(--bn-shadow-medium);
  color: var(--bn-colors-menu-text);
  height: unset;
  z-index: 1;
}

.bn-block-content .bn-preview-with-source-popup[data-open="true"] .bn-source-block-popup {
  width: 100%;
}

.bn-inline-content-section .bn-preview-with-source-popup[data-open="true"] .bn-source-block-popup {
  width: 300px;
}

.bn-code-block-source-popup-body {
  align-items: flex-end;
  display: flex;
}

.bn-code-block-source-popup-body > pre {
  tab-size: 2;
  white-space: pre;
  flex: 1;
  align-self: center;
  width: 0;
  max-height: 200px;
  margin: 0;
  padding: 16px;
  position: relative;
  overflow: auto;
}

.bn-code-block-source-popup-input-empty:before {
  color: currentColor;
  content: attr(data-placeholder);
  opacity: .5;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  overflow: hidden;
}

.bn-code-block-source-error {
  border-top: var(--bn-border);
  color: var(--bn-colors-highlights-red-text);
  padding: 8px 16px;
  font-family: monospace;
  font-size: .8em;
  white-space: pre-wrap !important;
}

.bn-code-block-source-popup-ok-button-wrapper {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 14px 16px;
}

.bn-code-block-source-popup-ok-button {
  appearance: none;
  border-radius: var(--bn-border-radius-small);
  color: #fff;
  cursor: pointer;
  background-color: #2563eb;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: .8em;
  font-weight: 500;
  display: flex;
}

.bn-code-block-source-popup-ok-button-icon {
  width: 1.2em;
  height: 1.2em;
}

.bn-code-block-source-popup-ok-button:hover {
  background-color: #1d4ed8;
}

.bn-preview-with-source-popup:has(.bn-preview-placeholder) {
  padding: 0;
}

.bn-preview-placeholder {
  color: #5f5b5c;
  background-color: #f2f1ee;
  border-radius: 4px;
  align-items: center;
  display: flex;
}

.bn-block-content .bn-preview-placeholder {
  gap: 10px;
  padding: 12px;
}

.bn-inline-content-section .bn-preview-placeholder {
  gap: 4px;
  padding: 0 4px;
}

.bn-preview-placeholder:where(.dark, .dark *) {
  color: #bebebe;
  background-color: #464646;
}

.bn-editor[contenteditable="true"] .bn-preview-placeholder:not(.bn-preview-placeholder-error):hover {
  background-color: #e1e1e1;
}

.bn-editor[contenteditable="true"] .bn-preview-placeholder:not(.bn-preview-placeholder-error):hover:where(.dark, .dark *) {
  background-color: #5a5a5a;
}

.bn-preview-placeholder-error {
  background-color: var(--bn-colors-highlights-red-background);
  color: var(--bn-colors-highlights-red-text);
}

.bn-preview-placeholder-icon {
  align-items: center;
  display: flex;
}

.bn-block-content .bn-preview-placeholder-icon {
  width: 24px;
  height: 24px;
}

.bn-inline-content-section .bn-preview-placeholder-icon {
  width: 14px;
  height: 14px;
}

.bn-preview-placeholder-icon > svg {
  width: 100%;
  height: 100%;
}

.bn-preview-placeholder-text {
  margin: 0;
}

.bn-block-content .bn-preview-placeholder-text {
  font-size: .9rem;
}

.bn-inline-content-section .bn-preview-placeholder-text {
  font-size: .7rem;
}

.bn-suppress-source-popup-caret .bn-inline-content-section .bn-preview-with-source-popup:not([data-open="true"]) .bn-source-block-popup {
  visibility: hidden;
}

.bn-block-content[data-content-type="pageBreak"] > div {
  border-top: 2px dotted #7d797a;
  width: 100%;
  height: 0;
  margin-block: 11px;
}

@media print {
  .bn-block-content[data-content-type="pageBreak"] > div {
    page-break-after: always;
  }
}

[data-file-block] .bn-file-block-content-wrapper {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  margin: 0;
  display: flex;
}

:is([data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button), [data-file-block] .bn-file-block-content-wrapper:has(.bn-file-name-with-icon)) {
  width: 100%;
}

[data-file-block] .bn-add-file-button {
  color: #7d797a;
  background-color: #f2f1ee;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  display: flex;
}

[data-file-block] .bn-add-file-button:where(.dark, .dark *) {
  color: #bebebe;
  background-color: #464646;
}

.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover, [data-file-block] .bn-file-name-with-icon:hover, .ProseMirror-selectednode .bn-file-name-with-icon {
  background-color: #e1e1e1;
}

.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover:where(.dark, .dark *), [data-file-block] .bn-file-name-with-icon:hover:where(.dark, .dark *), .ProseMirror-selectednode .bn-file-name-with-icon:where(.dark, .dark *) {
  background-color: #5a5a5a;
}

[data-file-block] .bn-add-file-button-icon, [data-file-block] .bn-file-icon {
  width: 24px;
  height: 24px;
}

[data-file-block] .bn-add-file-button-text {
  font-size: .9rem;
}

[data-file-block] .bn-file-name-with-icon {
  border-radius: 4px;
  gap: 4px;
  padding: 4px;
  display: flex;
}

[data-file-block] .bn-file-caption {
  word-break: break-word;
  padding-block: 4px;
  font-size: .8em;
}

[data-file-block] .bn-file-caption:empty {
  padding-block: 0;
}

[data-file-block] .bn-resize-handle {
  cursor: ew-resize;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 4px;
  width: 8px;
  height: 30px;
  position: absolute;
}

[data-file-block] .bn-visual-media-wrapper {
  align-items: center;
  max-width: 100%;
  display: flex;
  position: relative;
}

[data-file-block] .bn-visual-media {
  border-radius: 4px;
  width: 100%;
}

[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
  width: 100%;
}

.bn-block-content:has(.ProseMirror-trailingBreak:only-child):after {
  pointer-events: none;
  max-width: 100%;
  margin-inline: -2px;
  font-style: italic;
}

[data-style-type="textColor"][data-value="gray"], [data-text-color="gray"], .bn-block:has( > .bn-block-content[data-text-color="gray"]) {
  color: #9b9a97;
}

[data-style-type="textColor"][data-value="brown"], [data-text-color="brown"], .bn-block:has( > .bn-block-content[data-text-color="brown"]) {
  color: #64473a;
}

[data-style-type="textColor"][data-value="red"], [data-text-color="red"], .bn-block:has( > .bn-block-content[data-text-color="red"]) {
  color: #e03e3e;
}

[data-style-type="textColor"][data-value="orange"], [data-text-color="orange"], .bn-block:has( > .bn-block-content[data-text-color="orange"]) {
  color: #d9730d;
}

[data-style-type="textColor"][data-value="yellow"], [data-text-color="yellow"], .bn-block:has( > .bn-block-content[data-text-color="yellow"]) {
  color: #dfab01;
}

[data-style-type="textColor"][data-value="green"], [data-text-color="green"], .bn-block:has( > .bn-block-content[data-text-color="green"]) {
  color: #4d6461;
}

[data-style-type="textColor"][data-value="blue"], [data-text-color="blue"], .bn-block:has( > .bn-block-content[data-text-color="blue"]) {
  color: #0b6e99;
}

[data-style-type="textColor"][data-value="purple"], [data-text-color="purple"], .bn-block:has( > .bn-block-content[data-text-color="purple"]) {
  color: #6940a5;
}

[data-style-type="textColor"][data-value="pink"], [data-text-color="pink"], .bn-block:has( > .bn-block-content[data-text-color="pink"]) {
  color: #ad1a72;
}

[data-style-type="backgroundColor"][data-value="gray"], [data-background-color="gray"], .bn-block:has( > .bn-block-content[data-background-color="gray"]) {
  background-color: #ebeced;
}

[data-style-type="backgroundColor"][data-value="brown"], [data-background-color="brown"], .bn-block:has( > .bn-block-content[data-background-color="brown"]) {
  background-color: #e9e5e3;
}

[data-style-type="backgroundColor"][data-value="red"], [data-background-color="red"], .bn-block:has( > .bn-block-content[data-background-color="red"]) {
  background-color: #fbe4e4;
}

[data-style-type="backgroundColor"][data-value="orange"], [data-background-color="orange"], .bn-block:has( > .bn-block-content[data-background-color="orange"]) {
  background-color: #f6e9d9;
}

[data-style-type="backgroundColor"][data-value="yellow"], [data-background-color="yellow"], .bn-block:has( > .bn-block-content[data-background-color="yellow"]) {
  background-color: #fbf3db;
}

[data-style-type="backgroundColor"][data-value="green"], [data-background-color="green"], .bn-block:has( > .bn-block-content[data-background-color="green"]) {
  background-color: #ddedea;
}

[data-style-type="backgroundColor"][data-value="blue"], [data-background-color="blue"], .bn-block:has( > .bn-block-content[data-background-color="blue"]) {
  background-color: #ddebf1;
}

[data-style-type="backgroundColor"][data-value="purple"], [data-background-color="purple"], .bn-block:has( > .bn-block-content[data-background-color="purple"]) {
  background-color: #eae4f2;
}

[data-style-type="backgroundColor"][data-value="pink"], [data-background-color="pink"], .bn-block:has( > .bn-block-content[data-background-color="pink"]) {
  background-color: #f4dfeb;
}

[data-text-alignment="left"] {
  text-align: left !important;
  justify-content: flex-start !important;
}

[data-text-alignment="center"] {
  text-align: center !important;
  justify-content: center !important;
}

[data-text-alignment="right"] {
  text-align: right !important;
  justify-content: flex-end !important;
}

[data-text-alignment="justify"] {
  text-align: justify !important;
  justify-content: flex-start !important;
}

.bn-block-column-list {
  flex-direction: row;
  display: flex;
}

.bn-block-column {
  flex-direction: column;
  flex: 1;
  padding: 12px 15px 12px 25px;
  display: flex;
  overflow-x: auto;
}

.bn-editor[contenteditable="true"] .bn-column-list-hovered > .bn-block-column:not(:last-child) {
  transition: box-shadow .2s .2s;
  box-shadow: 4px 0 #eee;
}

.bn-editor[contenteditable="true"] .bn-column-list-hovered > .bn-block-column:not(:last-child):where(.dark, .dark *) {
  box-shadow: 4px 0 #464646;
}

.bn-editor[contenteditable="true"] .bn-column-list-hovered > .bn-block-column.bn-column-resize-border {
  cursor: col-resize;
  transition: box-shadow .2s;
  box-shadow: 4px 0 #ccc;
}

.bn-editor[contenteditable="true"] .bn-column-list-hovered > .bn-block-column.bn-column-resize-border:where(.dark, .dark *) {
  box-shadow: 4px 0 #6e6e6e;
}

.bn-editor[contenteditable="true"] .bn-block-column.bn-column-resize-border + .bn-block-column {
  cursor: col-resize;
}

.bn-block-column > .bn-trailing-block {
  flex-grow: 1;
  height: auto;
}

.bn-block-column:first-child {
  padding-left: 0;
}

.bn-block-column:last-child {
  padding-right: 0;
}

.bn-thread-mark:not([data-orphan="true"]) {
  background: #ffc80026;
}

.bn-thread-mark .bn-thread-mark-selected {
  background: #ffc80040;
}

div[data-type="modification"] {
  display: inline;
}

.bn-root ins, .bn-root del {
  background-color: var(--user-color-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .bn-root ins, .bn-root del {
    background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
  }
}

.bn-root ins, .bn-root del {
  color: var(--user-color-dark);
  border-radius: 4px;
  text-decoration: none;
  position: relative;
}

.dark.bn-root ins, .dark.bn-root del {
  background-color: var(--user-color-dark);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark.bn-root ins, .dark.bn-root del {
    background-color: color-mix(in srgb, var(--user-color-dark) 50%, black);
  }
}

.dark.bn-root ins, .dark.bn-root del {
  color: var(--user-color-light);
}

.bn-suggestion-mark {
  background-color: var(--user-color-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .bn-suggestion-mark {
    background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
  }
}

.bn-suggestion-mark {
  color: var(--user-color-dark);
  border-radius: 4px;
}

.dark.bn-root .bn-suggestion-mark {
  background-color: var(--user-color-dark);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark.bn-root .bn-suggestion-mark {
    background-color: color-mix(in srgb, var(--user-color-dark) 50%, black);
  }
}

.dark.bn-root .bn-suggestion-mark {
  color: #fff;
}

.bn-suggestion-node > * {
  background-color: var(--user-color-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .bn-suggestion-node > * {
    background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
  }
}

.bn-suggestion-node > * {
  border-radius: 4px;
}

.dark.bn-root .bn-suggestion-node > * {
  background-color: var(--user-color-dark);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark.bn-root .bn-suggestion-node > * {
    background-color: color-mix(in srgb, var(--user-color-dark) 50%, black);
  }
}

.bn-suggestion-node--delete > :first-child:before {
  content: var(--deleted-label, "Deleted");
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
  color: var(--bn-colors-editor-text);
  margin-right: 6px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  display: inline-block;
}

.bn-suggestion-node:has(.bn-block-content) > *, .dark.bn-root .bn-suggestion-node:has(.bn-block-content) > * {
  background-color: #0000;
}

.bn-suggestion-node--delete:has(.bn-block-content) > :first-child:before {
  content: none;
}

.bn-suggestion-node--delete .bn-block-content .bn-inline-content {
  color: var(--user-color-dark);
  text-decoration: line-through;
}

.dark.bn-root .bn-suggestion-node--delete .bn-block-content .bn-inline-content {
  color: var(--user-color-light);
}

.bn-suggestion-node--delete :is(td, th) p {
  color: var(--user-color-dark);
  text-decoration: line-through;
}

.dark.bn-root .bn-suggestion-node--delete :is(td, th) p {
  color: var(--user-color-light);
}

.bn-suggestion-node--delete > :is(table, tr, td, th):first-child:before {
  content: none;
}

.bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)) {
  background-color: var(--user-color-light);
}

@supports (color: color-mix(in lab, red, red)) {
  .bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)) {
    background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
  }
}

.bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)) {
  border-radius: 16px;
  padding: 12px;
}

.dark.bn-root .bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)) {
  background-color: var(--user-color-dark);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark.bn-root .bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)) {
    background-color: color-mix(in srgb, var(--user-color-dark) 50%, black);
  }
}

.bn-suggestion-node .bn-block-content:not(:has(.bn-inline-content)):has( > .bn-file-block-content-wrapper) {
  width: fit-content;
}

.bn-suggestion-node--delete .bn-block-content:not(:has(.bn-inline-content)) {
  padding: 48px 24px 24px;
  position: relative;
}

.bn-suggestion-node--delete .bn-block-content:not(:has(.bn-inline-content)):before {
  content: var(--deleted-label, "Deleted");
  color: var(--bn-colors-editor-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  top: 16px;
  left: 24px;
}

[data-type="modification"] .bn-suggestion-mark, [data-type="modification"] .bn-suggestion-node > * {
  color: inherit;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  -webkit-text-decoration-color: var(--user-color-dark);
  -webkit-text-decoration-color: var(--user-color-dark);
  -webkit-text-decoration-color: var(--user-color-dark);
  text-decoration-color: var(--user-color-dark);
  text-underline-offset: 2px;
  background-color: #0000;
  text-decoration-thickness: 2px;
}

.dark.bn-root [data-type="modification"] .bn-suggestion-mark, .dark.bn-root [data-type="modification"] .bn-suggestion-node > * {
  color: inherit;
  -webkit-text-decoration-color: var(--user-color-light);
  -webkit-text-decoration-color: var(--user-color-light);
  -webkit-text-decoration-color: var(--user-color-light);
  text-decoration-color: var(--user-color-light);
  background-color: #0000;
}

[data-type="modification"] .bn-suggestion-mark:hover, [data-type="modification"] .bn-suggestion-node:hover > * {
  background-color: var(--user-color-light);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-type="modification"] .bn-suggestion-mark:hover, [data-type="modification"] .bn-suggestion-node:hover > * {
    background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
  }
}

[data-type="modification"] .bn-suggestion-mark:hover, [data-type="modification"] .bn-suggestion-node:hover > * {
  border-radius: 4px;
}

.dark.bn-root [data-type="modification"] .bn-suggestion-mark:hover, .dark.bn-root [data-type="modification"] .bn-suggestion-node:hover > * {
  background-color: var(--user-color-dark);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark.bn-root [data-type="modification"] .bn-suggestion-mark:hover, .dark.bn-root [data-type="modification"] .bn-suggestion-node:hover > * {
    background-color: color-mix(in srgb, var(--user-color-dark) 50%, black);
  }
}

.bn-suggestion-mark--delete {
  color: var(--user-color-dark);
  background-color: #0000;
  text-decoration: line-through;
}

.dark.bn-root .bn-suggestion-mark--delete {
  color: var(--user-color-light);
  background-color: #0000;
}

.bn-suggestion-tooltip {
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background-color: #232323;
  border: 1px solid #ffffff1a;
  border-radius: 4px;
  width: max-content;
  max-width: calc(100vw - 8px);
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
}

.bn-root del {
  color: var(--user-color-dark);
  background-color: #0000;
  text-decoration: line-through;
}

.dark.bn-root del {
  color: var(--user-color-light);
  background-color: #0000;
}

.bn-root del:hover {
  text-decoration-line: overline;
}

.ProseMirror .tableWrapper {
  overflow-x: auto;
}

.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
}

.ProseMirror td, .ProseMirror th {
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging), .ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
  min-width: var(--default-cell-min-width);
}

.ProseMirror .column-resize-handle {
  z-index: 20;
  pointer-events: none;
  background-color: #adf;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
}

.ProseMirror.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.ProseMirror .selectedCell:after {
  z-index: 2;
  content: "";
  pointer-events: none;
  background: #c8c8ff66;
  position: absolute;
  inset: 0;
}

.bn-editor {
  font-synthesis: style weight;
  --N800: #172b4d;
  --N40: #dfe1e6;
  outline: none;
  padding-inline: 54px;
}

.bn-comment-editor {
  width: 100%;
  padding: 0;
}

.bn-comment-editor .bn-editor {
  padding: 0;
}

.bn-default-styles p, .bn-default-styles h1, .bn-default-styles h2, .bn-default-styles h3, .bn-default-styles h4, .bn-default-styles h5, .bn-default-styles h6, .bn-default-styles li {
  font-size: inherit;
  margin: 0;
  padding: 0;
  min-width: 2px !important;
}

.bn-default-styles {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Inter, SF Pro Display, -apple-system, BlinkMacSystemFont, Open Sans, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.bn-table-drop-cursor {
  z-index: 20;
  pointer-events: none;
  background-color: #adf;
  position: absolute;
}

.bn-drag-preview {
  opacity: .001;
  pointer-events: none;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.bn-editor .bn-collaboration-cursor__base {
  position: relative;
}

.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__caret {
  width: 2px;
  position: absolute;
  top: 1px;
  bottom: -2px;
  left: -1px;
}

.bn-editor .bn-collaboration-cursor__base .bn-collaboration-cursor__label {
  pointer-events: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  color: #0000;
  border-radius: 0 1.5px 1.5px 0;
  max-width: 4px;
  max-height: 5px;
  padding: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: all .2s;
  position: absolute;
  top: -1px;
  left: 0;
  overflow: hidden;
}

.bn-editor .bn-collaboration-cursor__base[data-active] .bn-collaboration-cursor__label {
  color: #0d0d0d;
  border-radius: 3px 3px 3px 0;
  max-width: 20rem;
  max-height: 1.1rem;
  padding: .1rem .3rem;
  transition: all .2s;
  top: -17px;
  left: 0;
}

.bn-editor [data-content-type="table"] .tableWrapper {
  --bn-table-widget-size: 22px;
  --bn-table-handle-size: calc(18px / 2);
  padding: var(--bn-table-handle-size) var(--bn-table-widget-size) var(--bn-table-widget-size) var(--bn-table-handle-size);
  width: 100%;
  position: relative;
  overflow-y: hidden;
}

.bn-editor [data-content-type="table"] table {
  word-break: break-word;
  width: auto !important;
}

.bn-editor [data-content-type="table"] th, .bn-editor [data-content-type="table"] td {
  border: 1px solid #ddd;
  padding: 5px 10px;
}

.bn-editor [data-content-type="table"] th {
  text-align: left;
  font-weight: 700;
}

.bn-editor [data-content-type="table"] th > p, .bn-editor [data-content-type="table"] td > p {
  min-height: 1.5rem;
}

.ProseMirror td, .ProseMirror th {
  min-width: auto !important;
}

.ProseMirror td:not([colwidth]):not(.column-resize-dragging), .ProseMirror th:not([colwidth]):not(.column-resize-dragging) {
  min-width: var(--default-cell-min-width) !important;
}

.prosemirror-dropcursor-block {
  transition-property: top, bottom;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.prosemirror-dropcursor-vertical {
  transition-property: left, right;
}

[data-show-selection] {
  background-color: highlight;
  padding: 2px 0;
}

.button {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 30px;
  color: var(--ink);
  box-shadow: var(--shadow-control);
  white-space: nowrap;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.button:hover:not(:disabled) {
  background-color: var(--surface-sunken);
}

.button:disabled {
  opacity: .45;
  cursor: default;
}

.button--primary {
  background-color: var(--accent);
  color: #fff;
  border-color: #0000;
}

.button--primary:hover:not(:disabled) {
  background-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .button--primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--accent) 88%, #fff);
  }
}

.button--danger {
  color: #fff;
  background-color: #b91c1c;
  border-color: #0000;
}

.button--danger:hover:not(:disabled) {
  background-color: #dc2626;
}

.button--on, .button--on:hover {
  border-color: var(--accent);
  background-color: var(--tint);
  color: var(--accent);
}

.button--small {
  height: 26px;
  padding: 0 11px;
  font-size: 12px;
}

.tool {
  min-width: 30px;
  height: 28px;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  display: inline-flex;
}

.tool:hover:not(:disabled) {
  background-color: var(--tint);
  color: var(--ink);
}

.tool--active, .tool--active:hover:not(:disabled) {
  background-color: var(--tint);
  color: var(--accent);
}

.tool:disabled {
  opacity: .35;
  cursor: default;
}

.tool--primary, .tool--primary:hover:not(:disabled) {
  background-color: var(--accent);
  color: #fff;
}

.tool--small {
  min-width: 26px;
  height: 24px;
}

.tool--labelled {
  gap: 5px;
  padding: 0 8px 0 6px;
}

.tool__label {
  font-size: 12px;
  font-weight: 500;
}

.tool--word {
  min-width: 44px;
  height: 44px;
  color: var(--ink);
  flex-direction: column;
  gap: 3px;
  padding: 0 5px;
  line-height: 1;
}

.tool--unsaved {
  position: relative;
}

.tool--unsaved:after {
  content: "";
  background-color: var(--accent);
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 2px var(--bar);
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 9px;
}

.tool--word > svg {
  color: var(--ink-muted);
}

.tool--word:hover:not(:disabled) > svg, .tool--word.tool--active > svg {
  color: inherit;
}

.tool__word {
  white-space: nowrap;
  align-items: center;
  height: 11px;
  font-size: 10.5px;
  font-weight: 500;
  display: inline-flex;
}

.tool__word .icon--caret {
  width: 9px;
  height: 9px;
  color: var(--ink-faint);
  margin-left: 1px;
}

.tool-split {
  flex: none;
  align-items: center;
  display: inline-flex;
}

.tool-split .tool--word {
  border-radius: 6px 0 0 6px;
  min-width: 40px;
  padding-right: 3px;
}

.tool--split-arrow {
  min-width: 14px;
  height: 44px;
  color: var(--ink-faint);
  border-radius: 0 6px 6px 0;
  padding: 0 2px 0 1px;
}

.tool--split-arrow .icon--caret {
  width: 9px;
  height: 9px;
  margin: 0;
}

.tool-split .popover-host .popover {
  left: -60px;
}

.icon--caret {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 10px;
  height: 10px;
  margin-left: -2px;
}

.link {
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}

.link:hover:not(:disabled) {
  text-underline-offset: 2px;
  text-decoration: underline;
}

.link:disabled {
  opacity: .5;
  cursor: default;
}

.link--strong {
  font-weight: 600;
}

.field {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 0;
  height: 26px;
  font-family: var(--font-sans);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  border-radius: 6px;
  outline: none;
  padding: 0 8px;
  font-size: 12px;
}

.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.field:disabled {
  opacity: .45;
}

select.field {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 6px center;
  background-repeat: no-repeat;
  background-size: 12px;
  padding-right: 22px;
}

.field--large {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

.field--mono {
  letter-spacing: .03em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.field--number {
  width: 5.5rem;
}

.field--chapter {
  flex: none;
  width: 3.5rem;
}

.search {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 0;
  height: 28px;
  color: var(--ink-faint);
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  display: flex;
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.search__input {
  min-width: 0;
  color: var(--ink);
  background: none;
  outline: none;
  flex: 1;
  font-size: 12px;
}

.search__input::placeholder {
  color: var(--ink-faint);
}

.segmented {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  padding: 2px;
  display: inline-flex;
}

.segmented--fill {
  width: 100%;
}

.segmented__item {
  height: 22px;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.segmented--fill .segmented__item {
  flex: 1;
  padding: 0 4px;
}

.segmented__item:hover:not(:disabled):not(.segmented__item--on) {
  color: var(--ink);
}

.segmented__item--on {
  background-color: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px #0000001f;
}

.segmented__item:disabled {
  opacity: .4;
  cursor: default;
}

.switch {
  background-color: var(--hair);
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  width: 30px;
  height: 18px;
  transition: background-color .12s;
  position: relative;
}

.switch__knob {
  background-color: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: left .12s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #00000040;
}

.switch--on {
  background-color: var(--accent);
}

.switch--on .switch__knob {
  left: 14px;
}

.switch:disabled {
  opacity: .4;
  cursor: default;
}

.stepper {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 26px;
  box-shadow: var(--shadow-control);
  border-radius: 6px;
  align-items: center;
  display: inline-flex;
  overflow: hidden;
}

.stepper__step {
  width: 22px;
  height: 100%;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 13px;
}

.stepper__step:hover:not(:disabled) {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

.stepper__step:disabled {
  opacity: .4;
  cursor: default;
}

.stepper__value {
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-width: 44px;
  height: 100%;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
}

.stepper__value:hover {
  background-color: var(--surface-sunken);
}

.stepper__input {
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  text-align: center;
  width: 38px;
  height: 100%;
  color: var(--ink);
  background: none;
  outline: none;
  font-size: 12px;
  font-weight: 500;
}

.stepper__input:disabled {
  opacity: .4;
}

.swatches {
  align-items: center;
  gap: 8px;
  display: flex;
}

.swatch {
  cursor: pointer;
  border: 1px solid #0000001f;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

.dark .swatch {
  border-color: #ffffff26;
}

.swatch--none {
  border-style: dashed;
  border-color: var(--ink-faint);
  background: none;
}

.swatch--on {
  box-shadow: 0 0 0 2px var(--bar), 0 0 0 3.5px var(--ink);
}

.swatch:disabled {
  opacity: .4;
  cursor: default;
}

.swatch[data-kind="highlight"][data-mark="yellow"] {
  background-color: #fde68a;
}

.swatch[data-kind="highlight"][data-mark="green"] {
  background-color: #bbf7d0;
}

.swatch[data-kind="highlight"][data-mark="blue"] {
  background-color: #bfdbfe;
}

.swatch[data-kind="highlight"][data-mark="pink"] {
  background-color: #fbcfe8;
}

.swatch[data-kind="ink"][data-mark="red"] {
  background-color: var(--ink-red);
}

.swatch[data-kind="ink"][data-mark="blue"] {
  background-color: var(--ink-blue);
}

.swatch[data-kind="ink"][data-mark="green"] {
  background-color: var(--ink-green);
}

.swatch[data-kind="ink"][data-mark="gray"] {
  background-color: var(--ink-gray);
}

.itb-group {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  gap: 1px;
  padding: 2px;
  display: inline-flex;
}

.itb-group--fill {
  flex: 1;
}

.itb {
  min-width: 28px;
  height: 22px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  display: inline-flex;
}

.itb-group--fill .itb {
  flex: 1;
  min-width: 0;
  padding: 0 2px;
}

.itb:hover:not(:disabled) {
  background-color: var(--tint);
}

.itb--on, .itb--on:hover:not(:disabled) {
  background-color: var(--surface-raised);
  box-shadow: 0 1px 2px #0000001f;
}

.itb:disabled {
  opacity: .35;
  cursor: default;
}

.itb__serif {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1;
}

.popover-host {
  display: inline-flex;
  position: relative;
}

.popover {
  z-index: 40;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 14rem;
  box-shadow: var(--shadow-pop);
  text-transform: none;
  letter-spacing: normal;
  border-radius: 10px;
  padding: 6px;
  font-weight: 400;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
}

.popover--right {
  left: auto;
  right: 0;
}

.shell {
  --side: var(--c-side, 300px);
  --insp: 272px;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--insp);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  height: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
}

.shell--no-side {
  --side: 0px;
}

.shell--no-insp {
  --insp: 0px;
}

.cell--toolbar {
  padding-right: calc(10px + var(--controls-w));
  grid-area: 1 / 1 / 2 / 4;
}

.cell--side-body {
  grid-area: 2 / 1;
}

.cell--main {
  grid-area: 2 / 2;
}

.cell--insp-body {
  grid-area: 2 / 3;
}

.demo .cell--toolbar {
  padding-right: 10px;
}

.mac .cell--toolbar {
  padding-left: 80px;
  padding-right: 10px;
}

.topbar {
  height: var(--topbar-h);
  background-color: var(--bar);
  -webkit-app-region: drag;
  border-bottom: 0;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 10px;
  display: flex;
}

.topbar button, .topbar input, .topbar select, .topbar label, .topbar .popover, .topbar .segmented {
  -webkit-app-region: no-drag;
}

.topbar--bare {
  background: none;
  border-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.cell__title {
  color: var(--ink);
  flex: 1;
  padding-left: 4px;
  font-size: 13px;
  font-weight: 600;
}

.cell--side-body {
  background-color: var(--bar);
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: visible;
}

.cell--main {
  background-color: var(--surface);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.cell--insp-body {
  background-color: var(--bar);
  min-height: 0;
  overflow: hidden auto;
}

.shell--narrow {
  --side: 0px;
  --insp: 0px;
}

.shell--narrow .cell--side-body, .shell--narrow .cell--insp-body {
  top: var(--topbar-h);
  z-index: 30;
  box-shadow: var(--shadow-pop);
  position: fixed;
  bottom: 0;
}

.shell--narrow .cell--side-body {
  border-right: 1px solid var(--border-subtle);
  width: min(88vw, 340px);
  left: 0;
}

.shell--narrow .cell--insp-body {
  border-left: 1px solid var(--border-subtle);
  width: min(88vw, 300px);
  right: 0;
}

.shell__scrim {
  inset: var(--topbar-h) 0 0 0;
  z-index: 25;
  background-color: #00000047;
  position: fixed;
}

.shell__resizer {
  z-index: 5;
  cursor: col-resize;
  grid-area: 2 / 1 / 3;
  justify-self: end;
  width: 6px;
  margin-right: -3px;
}

.shell__resizer:hover, .shell__resizer:active {
  background-color: var(--accent);
  opacity: .5;
}

.shell__toast {
  z-index: 20;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  border-radius: 8px;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px;
  display: flex;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.shell__toast .app-importing, .shell__toast .app-error {
  margin: 0;
}

.app-loading, .app-empty {
  text-align: center;
  min-height: 0;
  color: var(--ink-muted);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 48px 40px;
  display: flex;
}

.app-empty__mark {
  background-color: var(--tint);
  width: 56px;
  height: 56px;
  color: var(--accent);
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  display: inline-flex;
}

.app-empty__title {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: 26px;
  font-weight: 600;
}

.app-empty__hint {
  max-width: 400px;
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}

.app-empty__where {
  color: var(--ink-faint);
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-size: 12px;
  display: inline-flex;
}

.app-empty__where strong {
  color: var(--ink-muted);
  font-weight: 500;
}

.app-empty__where svg {
  flex: none;
}

.app-error {
  color: #dc2626;
  margin: 0 24px 16px;
  font-size: 13px;
}

.dark .app-error {
  color: #f87171;
}

.app-empty__import {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  text-align: left;
  border-radius: 10px;
  flex-direction: column;
  gap: 10px;
  width: 460px;
  max-width: 100%;
  margin-top: 28px;
  padding: 16px 18px;
  font-size: 13px;
  display: flex;
}

.app-empty__import-title {
  color: var(--ink);
  font-weight: 600;
}

.app-empty__import-actions {
  gap: 8px;
  display: flex;
}

.app-empty__import-hint {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.app-importing {
  color: var(--ink-muted);
  margin: 0 24px 16px;
  font-size: 13px;
}

.welcome {
  height: 100%;
  padding: var(--topbar-h) 40px 40px;
  background-color: var(--surface);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.welcome__body {
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 640px;
  margin: auto 0;
  display: flex;
}

.welcome__hero {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
}

.welcome__mark {
  background-color: var(--tint);
  width: 64px;
  height: 64px;
  color: var(--accent);
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  display: inline-flex;
}

.setup__title {
  font-family: var(--font-serif);
  letter-spacing: -.01em;
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
}

.welcome__lede {
  max-width: 520px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
}

.welcome__choose {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.welcome__kicker {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
}

.welcome__grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.welcome__note {
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.5;
}

.welcome__warning {
  color: #b45309;
  font-size: 12.5px;
  line-height: 1.5;
}

.dark .welcome__warning {
  color: #fbbf24;
}

.cloud-card {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 0;
  box-shadow: var(--shadow-control);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  display: flex;
}

.cloud-card:hover:not(.cloud-card--off) {
  border-color: var(--hair);
}

.cloud-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cloud-card--off {
  opacity: .55;
  box-shadow: none;
  background-color: var(--surface-sunken);
}

.cloud-card--own {
  cursor: default;
  padding: 12px 16px;
}

.cloud-card--still {
  cursor: default;
}

.cloud-card--still:hover {
  border-color: var(--border-subtle);
}

.cloud-card--connected {
  border-color: var(--accent);
  cursor: default;
}

.cloud-card--connected .cloud-card__where {
  color: var(--accent);
}

.cloud-card--current {
  border-color: var(--accent);
  cursor: default;
}

.cloud-card__actions {
  flex: none;
  gap: 6px;
  margin-left: auto;
  display: flex;
}

.welcome__continue {
  flex: none;
  gap: 4px;
  margin-left: auto;
}

.welcome__status {
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.cloud-card--own .button {
  flex: none;
  margin-left: auto;
}

.cloud-card__badge {
  background-color: var(--tint);
  width: 40px;
  height: 40px;
  color: var(--accent);
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cloud-card--off .cloud-card__badge, .cloud-card__badge--plain {
  background-color: var(--surface-sunken);
  color: var(--ink-muted);
}

.cloud-card__text {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.cloud-card__name {
  font-size: 13.5px;
  font-weight: 600;
}

.cloud-card__where {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted);
  font-size: 11.5px;
  overflow: hidden;
}

.cloud-card__go {
  color: var(--ink-faint);
  flex: none;
  margin-left: auto;
}

.welcome__promises {
  border-top: 1px solid var(--rule);
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
  padding-top: 18px;
  display: grid;
}

.welcome__promises p {
  color: var(--ink-muted);
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
}

.welcome__promises svg {
  color: var(--accent);
  flex: none;
  margin-top: 1px;
}

.welcome__promises strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 760px) {
  .welcome__grid, .welcome__promises {
    grid-template-columns: 1fr;
  }
}

.library {
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
}

.library__top {
  border-bottom: 1px solid var(--rule);
  flex-direction: column;
  flex: none;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.library__top .search {
  height: 30px;
}

.search__clear {
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.search__clear:hover {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

.library__chips {
  z-index: 3;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  flex: none;
  gap: 6px;
  padding: 10px 10px 9px;
  display: flex;
  position: relative;
}

.library__chips--bare {
  border-bottom: 0;
  padding: 2px 0 0;
}

.chip {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 24px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
}

.chip:hover:not(:disabled) {
  border-color: var(--ink-faint);
}

.chip__label {
  text-overflow: ellipsis;
  max-width: 12rem;
  overflow: hidden;
}

.chip__count {
  color: var(--ink-label);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.chip--on, .chip--on:hover:not(:disabled) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chip--on .chip__count {
  color: #ffffffb3;
}

.chip__x {
  opacity: .8;
}

.chip--menu .chip__label {
  max-width: 14rem;
}

.chip__caret {
  opacity: .6;
  transform: rotate(90deg);
}

.chip--menu.chip--active:not(.chip--on), .chip--menu.chip--active:not(.chip--on):hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--tint);
}

.tagpick {
  white-space: normal;
  flex-direction: column;
  gap: 6px;
  width: 16rem;
  padding: 6px;
  display: flex;
}

.tagpick__find {
  height: 26px;
  font-size: 12.5px;
}

.tagpick__list {
  flex-direction: column;
  max-height: 18rem;
  display: flex;
  overflow-y: auto;
}

.tagpick__item {
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  font-size: 12.5px;
  display: flex;
}

.tagpick__item:hover {
  background-color: var(--tint);
}

.tagpick__item--on, .tagpick__item--on:hover {
  background-color: var(--tint);
  color: var(--accent);
  font-weight: 600;
}

.tagpick__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.tagpick__count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 11px;
}

.tagpick__none {
  color: var(--ink-faint);
  margin: 0;
  padding: 6px 8px;
  font-size: 12px;
}

.chip--more {
  color: var(--ink-muted);
  border-style: dashed;
}

.chip--more.chip--active, .chip--more.chip--active:hover:not(:disabled) {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background-color: var(--tint);
}

.library__body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.library__rail {
  border-right: 1px solid var(--rule);
  scrollbar-width: none;
  flex-direction: column;
  flex: none;
  align-items: center;
  gap: 2px;
  width: 34px;
  padding: 10px 0;
  display: flex;
  overflow-y: auto;
}

.library__rail-year {
  font-variant-numeric: tabular-nums;
  width: 26px;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 0;
  font-size: 10.5px;
}

.library__rail-year:hover {
  background-color: var(--tint);
  color: var(--ink);
}

.library__rail-year--open {
  background-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.library__rail-year--open:hover {
  background-color: var(--accent);
  color: #fff;
}

.library__rail-year--none {
  color: var(--ink-faint);
}

.library__list {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding-bottom: 8px;
  overflow-y: auto;
}

.library__year-head {
  z-index: 1;
  background-color: var(--surface-sunken);
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px 4px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  position: sticky;
  top: 0;
}

.library__year-head:hover .library__year-name {
  color: var(--accent);
}

.library__year-chevron {
  color: var(--ink-faint);
  align-self: center;
  transition: transform .12s;
}

.library__year-head--open .library__year-chevron {
  transform: rotate(90deg);
}

.library__year-count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 400;
}

.chip--view .chip__label {
  font-weight: 600;
}

.filters__save .filters__pair {
  align-items: center;
}

.library__order {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px 2px;
  display: flex;
}

.library__count {
  min-width: 0;
  color: var(--ink-label);
  font-size: 11px;
  line-height: 1.4;
}

.library__series-link {
  margin-left: 6px;
  font-size: 11px;
}

.library__sort {
  color: var(--ink-muted);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  padding: 0;
  font-size: 11px;
}

.library__sort:hover {
  color: var(--ink);
}

.library__group-title {
  letter-spacing: .02em;
  color: var(--ink-label);
  padding: 12px 14px 2px;
  font-size: 11px;
  font-weight: 600;
}

.sermon-list {
  flex-direction: column;
  gap: 2px;
  padding: 2px 8px 4px;
  display: flex;
}

.sermon-list__item {
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px 12px 9px;
  display: flex;
}

.sermon-list__item:hover {
  background-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .sermon-list__item:hover {
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  }
}

.sermon-list__item--active, .sermon-list__item--active:hover {
  background-color: var(--tint);
}

.sermon-list__item-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.sermon-list__item-meta, .sermon-list__empty {
  color: var(--ink-muted);
  font-size: 11px;
}

.sermon-list__empty {
  padding: 12px 14px;
  line-height: 1.45;
}

.hit__snippet {
  -webkit-line-clamp: 2;
  color: var(--ink-muted);
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.hit__mark {
  color: var(--accent);
  background-color: #0000;
  font-weight: 600;
}

.library__failures {
  padding: 4px 14px;
  font-size: 11px;
}

.library__failures-summary {
  color: #d97706;
  text-underline-offset: 2px;
  cursor: pointer;
  text-decoration: underline;
}

.dark .library__failures-summary {
  color: #fbbf24;
}

.library__failures-list {
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  display: flex;
}

.library__failures-item {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.library__failures-reason {
  color: var(--ink-muted);
}

.library__failures-item {
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}

.filters {
  white-space: normal;
  flex-direction: column;
  gap: 10px;
  width: 20rem;
  max-height: min(32rem, 70vh);
  padding: 10px;
  display: flex;
  overflow-y: auto;
}

.filters__field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.filters__label {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
}

.filters__pair {
  gap: 6px;
  display: flex;
}

.filters__pair .field {
  flex: 1;
}

.filters__actions {
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 2px;
  padding-top: 10px;
  display: flex;
}

.library .illus-panel {
  flex: 1;
  min-height: 0;
}

.library .illus-panel__list {
  padding: 8px 10px;
}

.library__row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.library__row .search {
  flex: 1;
  min-width: 0;
}

.library__more {
  width: 30px;
  height: 30px;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.library__more:hover, .library__more[aria-expanded="true"] {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

.library__menu .filters__actions {
  border-top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
}

.library__menu {
  width: max-content;
  min-width: 0;
}

.toolbar {
  padding: 0 calc(10px + var(--controls-w)) 0 8px;
  gap: 1px;
  container-type: inline-size;
}

.mac .toolbar {
  padding: 0 10px 0 80px;
}

.toolbar__group {
  flex: none;
  align-items: center;
  gap: 1px;
  display: flex;
}

.toolbar__group--end {
  gap: 4px;
}

.toolbar__center {
  flex: 1;
  justify-content: center;
  min-width: 0;
  padding: 0 6px;
  display: flex;
  overflow: hidden;
}

.toolbar__sep {
  background-color: var(--border-subtle);
  width: 1px;
  height: 22px;
  margin: 0 4px;
}

.toolbar__preach {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.toolbar__center .segmented {
  flex: none;
}

.popover-host--word {
  align-items: center;
}

@container (max-width: 1120px) {
  .toolbar .segmented__label {
    display: none;
  }

  .toolbar .segmented__item {
    padding: 0 8px;
  }
}

@container (max-width: 940px) {
  .toolbar .tool--fold-1 {
    min-width: 30px;
  }

  .toolbar .tool--fold-1 .tool__word {
    display: none;
  }
}

@container (max-width: 900px) {
  .toolbar .tool--fold-2 {
    min-width: 30px;
  }

  .toolbar .tool--fold-2 .tool__word {
    display: none;
  }
}

@container (max-width: 860px) {
  .toolbar .tool--fold-3 {
    min-width: 30px;
  }

  .toolbar .tool--fold-3 .tool__word {
    display: none;
  }
}

@container (max-width: 790px) {
  .toolbar .tool--fold-4, .toolbar .tool-split .tool--fold-4 {
    min-width: 30px;
  }

  .toolbar .tool--fold-4 .tool__word {
    display: none;
  }
}

@container (max-width: 750px) {
  .toolbar .tool--fold-2, .toolbar .tool--fold-1[aria-label="Find"] {
    display: none;
  }

  .toolbar__sep {
    margin: 0 2px;
  }
}

@container (max-width: 660px) {
  .toolbar .tool--fold-1 {
    display: none;
  }

  .toolbar__preach {
    padding: 0 9px;
  }

  .toolbar__preach-word {
    display: none;
  }
}

@container (max-width: 570px) {
  .toolbar .tool-split--history, .toolbar .tool-split--history + .toolbar__sep {
    display: none;
  }
}

@container (max-width: 470px) {
  .toolbar .tool--word[aria-label="New sermon"], .toolbar .tool-split, .toolbar .tool-split + .toolbar__sep, .toolbar .popover-host:has( > [aria-label="Share"]) {
    display: none;
  }

  .toolbar .tool--word {
    padding: 0 5px;
  }

  .toolbar .segmented__item {
    padding: 0 7px;
  }
}

.ribbon {
  background-color: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-direction: column;
  flex: none;
  display: flex;
}

.ribbon__tabs {
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: .125rem;
  height: 1.875rem;
  padding: 0 1rem;
  display: flex;
}

.ribbon__tab {
  height: 2.125rem;
  color: var(--ink-muted);
  border-radius: .25rem .25rem 0 0;
  align-items: center;
  padding: 0 .75rem;
  font-size: .8125rem;
  display: inline-flex;
  position: relative;
}

.ribbon__tab:hover {
  color: var(--ink);
}

.ribbon__tab--active {
  color: var(--ink);
  font-weight: 600;
}

.ribbon__tab--active:after {
  content: "";
  background-color: var(--accent);
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: .5rem;
  right: .5rem;
}

.ribbon__tab--sermon {
  color: var(--accent);
  font-weight: 600;
}

.ribbon__tab--open {
  background-color: var(--surface-raised);
}

.ribbon__sermon {
  position: relative;
}

.ribbon__menu {
  z-index: 40;
  min-width: 17rem;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
}

.ribbon__end {
  align-items: center;
  gap: .625rem;
  margin-left: auto;
  display: flex;
}

.ribbon__preach {
  align-items: center;
  gap: .375rem;
  display: inline-flex;
}

.ribbon__body {
  align-items: stretch;
  height: 5.875rem;
  padding: .375rem .75rem 0;
  display: flex;
  overflow: clip visible;
}

.rgroup {
  flex-direction: column;
  flex: 1 0 auto;
  align-items: center;
  padding: 0 .5rem;
  display: flex;
  position: relative;
}

.rgroup__items {
  flex: 1;
  align-items: flex-start;
  gap: .125rem;
  display: flex;
}

.rgroup__caption {
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  height: 1.375rem;
  color: var(--ink-muted);
  align-items: center;
  font-size: .6875rem;
  display: flex;
}

.rgroup__sep {
  background-color: var(--border-subtle);
  flex: none;
  width: 1px;
  margin: .25rem 0 .5rem;
}

.rlarge {
  text-align: center;
  white-space: nowrap;
  width: 3.875rem;
  height: 4.125rem;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: .375rem;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .375rem .125rem 0;
  font-size: .6875rem;
  line-height: 1.15;
  display: flex;
}

.rlarge:hover:not(:disabled) {
  background-color: var(--surface-raised);
  border-color: var(--border-subtle);
}

.rlarge--active {
  background-color: var(--surface-raised);
  border-color: var(--border-subtle);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.rlarge--wide {
  width: 4.75rem;
}

.rlarge--compact {
  width: 2.5rem;
}

.rlarge--compact .rlarge__label {
  color: var(--ink-muted);
  margin-top: -.25rem;
}

.ribbon__body--tight .rgroup {
  padding: 0 .25rem;
}

.ribbon__body--tight .rgroup__sep {
  margin-left: 0;
  margin-right: 0;
}

.rlarge:disabled {
  opacity: .4;
  cursor: default;
}

.rlarge__glyph {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--block-accent, var(--ink));
  justify-content: center;
  align-items: center;
  display: flex;
}

.rlarge__marker {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
}

.ribbon__icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1rem;
  height: 1rem;
}

.ribbon__icon--large {
  stroke-width: 1.5px;
  width: 1.5rem;
  height: 1.5rem;
}

.rrows {
  flex-direction: column;
  gap: .125rem;
  display: flex;
}

.rrow {
  align-items: center;
  gap: .125rem;
  display: flex;
}

.rrow--top {
  align-items: flex-start;
}

.rsmall__label {
  margin-left: .25rem;
  font-size: .75rem;
}

.ribbon .format-bar__button {
  min-width: 1.625rem;
  height: 1.375rem;
  padding: 0 .3125rem;
  font-size: .8125rem;
}

.ribbon .format-bar__button:hover:not(:disabled), .ribbon .format-bar__button--active {
  background-color: var(--surface-raised);
  border-color: var(--border-subtle);
}

.ribbon .format-bar__select {
  height: 1.375rem;
}

.ribbon__value {
  cursor: pointer;
  border-radius: .25rem;
  min-width: 2.375rem;
  height: 1.375rem;
}

.ribbon__value:hover {
  background-color: var(--surface-raised);
}

.ribbon__check {
  align-items: center;
  gap: .375rem;
  height: 1.375rem;
  font-size: .75rem;
  display: flex;
}

.ribbon__check input {
  accent-color: var(--accent);
}

.rpop {
  z-index: 40;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: .5rem;
  margin-top: .25rem;
  padding: .5rem;
  position: absolute;
  top: 100%;
  left: 0;
  box-shadow: 0 12px 32px #00000024;
}

.rpop .format-bar__button:hover:not(:disabled), .rpop .format-bar__button--active {
  background-color: var(--surface-sunken);
}

.format-bar__button {
  min-width: 1.875rem;
  height: 1.75rem;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: .3rem;
  justify-content: center;
  align-items: center;
  padding: 0 .375rem;
  display: inline-flex;
}

.format-bar__button:hover:not(:disabled) {
  background-color: var(--surface-sunken);
}

.format-bar__button--active {
  background-color: var(--surface-sunken);
  border-color: var(--border-subtle);
}

.format-bar__button:disabled {
  opacity: .4;
  cursor: default;
}

.format-bar__glyph {
  font-family: var(--font-serif);
  font-size: .9375rem;
  line-height: 1;
}

.format-bar__glyph--bold {
  font-weight: 700;
}

.format-bar__glyph--italic {
  font-style: italic;
}

.format-bar__glyph--underline {
  text-underline-offset: 2px;
  text-decoration: underline;
}

.format-bar__glyph--strike {
  text-decoration: line-through;
}

.format-bar__value {
  font-variant-numeric: tabular-nums;
  min-width: 2.75rem;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: .3rem;
  padding: 0 .25rem;
  font-size: .6875rem;
}

.format-bar__value:hover {
  background-color: var(--surface-sunken);
}

.format-bar__glyph--small {
  font-size: .75rem;
}

.format-bar__glyph--large {
  font-size: 1.125rem;
}

.format-bar__select {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 1.75rem;
  color: var(--ink);
  border-radius: .3rem;
  padding: 0 .375rem;
  font-size: .75rem;
}

.rgrid {
  position: relative;
}

.rgrid__pop {
  z-index: 30;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: .25rem;
  padding: .5rem;
  position: absolute;
  top: 100%;
  left: 0;
  box-shadow: 0 8px 24px #0000001f;
}

.rgrid__cells {
  grid-template-columns: repeat(6, 1.1rem);
  gap: .2rem;
  display: grid;
}

.rgrid__cell {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  cursor: pointer;
  border-radius: .125rem;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
}

.rgrid__cell--on {
  border-color: var(--accent);
  background-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .rgrid__cell--on {
    background-color: color-mix(in srgb, var(--accent) 25%, var(--surface));
  }
}

.rgrid__label {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
  margin-top: .35rem;
  font-size: .7rem;
}

.rchoice {
  position: relative;
}

.rchoice__caret {
  color: var(--ink-muted);
  margin-left: .125rem;
  font-size: .5625rem;
}

.rpop--menu {
  flex-direction: column;
  gap: .125rem;
  min-width: 10rem;
  padding: .375rem;
  display: flex;
}

.rpop__section + .rpop__section {
  border-top: 1px solid var(--border-subtle);
  margin-top: .375rem;
  padding-top: .375rem;
}

.rpop__caption {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  margin: 0 0 .125rem;
  padding: 0 .5rem;
  font-size: .6875rem;
}

.rpop__item {
  text-align: left;
  width: 100%;
  color: var(--ink);
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: .8125rem;
  display: block;
}

.rpop__item:hover {
  background-color: var(--surface-sunken);
}

.rpop__item--active {
  background-color: var(--surface-sunken);
  font-weight: 600;
}

.rsize {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: .25rem;
  align-items: center;
  height: 1.375rem;
  display: inline-flex;
  position: relative;
}

.rsize__input {
  text-align: right;
  width: 2.375rem;
  height: 100%;
  color: var(--ink);
  background: none;
  outline: none;
  padding: 0 .25rem 0 .375rem;
  font-size: .75rem;
}

.rsize__input:disabled {
  opacity: .4;
}

.rsize__caret {
  border-left: 1px solid var(--border-subtle);
  height: 100%;
  color: var(--ink-muted);
  padding: 0 .3125rem;
  font-size: .6875rem;
}

.rsize__caret:hover:not(:disabled) {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

.rsize__caret:disabled {
  opacity: .4;
}

.rsize__list {
  z-index: 40;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: .5rem;
  width: 4rem;
  max-height: 14rem;
  margin: 0;
  padding: .25rem;
  list-style: none;
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  overflow-y: auto;
  box-shadow: 0 8px 24px #00000024;
}

.rsize__option {
  text-align: right;
  width: 100%;
  color: var(--ink);
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: .8125rem;
  display: block;
}

.rsize__option:hover {
  background-color: var(--surface-sunken);
}

.rsize__option--active {
  background-color: var(--surface-sunken);
  font-weight: 600;
}

.mark-menu {
  position: relative;
}

.mark-menu__glyph {
  font-family: var(--font-serif);
  border-radius: .15rem;
  padding: 0 .2rem;
  font-size: .9375rem;
  line-height: 1.1;
  display: inline-block;
}

.mark-menu__glyph--highlight {
  border-bottom: 3px solid var(--border-subtle);
}

.mark-menu__glyph--highlight[data-mark="yellow"] {
  border-bottom-color: var(--hl-yellow);
  background-color: var(--hl-yellow);
}

.mark-menu__glyph--highlight[data-mark="green"] {
  border-bottom-color: var(--hl-green);
  background-color: var(--hl-green);
}

.mark-menu__glyph--highlight[data-mark="blue"] {
  border-bottom-color: var(--hl-blue);
  background-color: var(--hl-blue);
}

.mark-menu__glyph--highlight[data-mark="pink"] {
  border-bottom-color: var(--hl-pink);
  background-color: var(--hl-pink);
}

.mark-menu__glyph--ink {
  border-bottom: 3px solid var(--ink);
}

.mark-menu__glyph--ink[data-mark="red"] {
  color: var(--ink-red);
  border-bottom-color: var(--ink-red);
}

.mark-menu__glyph--ink[data-mark="blue"] {
  color: var(--ink-blue);
  border-bottom-color: var(--ink-blue);
}

.mark-menu__glyph--ink[data-mark="green"] {
  color: var(--ink-green);
  border-bottom-color: var(--ink-green);
}

.mark-menu__glyph--ink[data-mark="gray"] {
  color: var(--ink-gray);
  border-bottom-color: var(--ink-gray);
}

.mark-menu__list {
  z-index: 30;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: .5rem;
  align-items: center;
  gap: .375rem;
  padding: .375rem;
  display: flex;
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  box-shadow: 0 8px 24px #00000024;
}

.mark-menu__swatch {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: .3rem;
  width: 1.5rem;
  height: 1.5rem;
}

.mark-menu__swatch--active, .mark-menu__swatch:hover {
  border-color: var(--ink);
}

.mark-menu__swatch[data-kind="highlight"][data-mark="yellow"] {
  background-color: var(--hl-yellow);
}

.mark-menu__swatch[data-kind="highlight"][data-mark="green"] {
  background-color: var(--hl-green);
}

.mark-menu__swatch[data-kind="highlight"][data-mark="blue"] {
  background-color: var(--hl-blue);
}

.mark-menu__swatch[data-kind="highlight"][data-mark="pink"] {
  background-color: var(--hl-pink);
}

.mark-menu__swatch[data-kind="ink"][data-mark="red"] {
  background-color: var(--ink-red);
}

.mark-menu__swatch[data-kind="ink"][data-mark="blue"] {
  background-color: var(--ink-blue);
}

.mark-menu__swatch[data-kind="ink"][data-mark="green"] {
  background-color: var(--ink-green);
}

.mark-menu__swatch[data-kind="ink"][data-mark="gray"] {
  background-color: var(--ink-gray);
}

.mark-menu__none {
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: .3rem;
  margin-left: .25rem;
  padding: .125rem .5rem;
  font-size: .75rem;
}

.mark-menu__none:hover {
  background-color: var(--surface-sunken);
  color: var(--ink);
}

.inspector {
  flex-direction: column;
  padding-bottom: 12px;
  display: flex;
  overflow-x: hidden;
}

.inspector__tabs {
  z-index: 2;
  background-color: var(--bar);
  border-bottom: 1px solid var(--rule);
  flex: none;
  padding: 8px 10px;
  position: sticky;
  top: 0;
}

.insp-section {
  border-bottom: 1px solid var(--rule);
  padding: 4px 0 8px;
}

.insp-section:last-of-type {
  border-bottom: 0;
}

.insp-section__title {
  letter-spacing: .02em;
  color: var(--ink-label);
  padding: 8px 8px 2px;
  font-size: 11px;
  font-weight: 600;
}

.insp-section__fold {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 5px;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 4px;
  display: inline-flex;
}

.insp-section__fold:hover {
  background-color: var(--tint);
  color: var(--ink);
}

.insp-section__chevron {
  transition: transform .12s;
}

.insp-section__fold[aria-expanded="true"] .insp-section__chevron {
  transform: rotate(90deg);
}

.insp-section--folded {
  padding-bottom: 6px;
}

.insp-row {
  min-height: 30px;
  color: var(--ink);
  align-items: center;
  gap: 8px;
  padding: 2px 14px;
  font-size: 12px;
  display: flex;
}

.insp-row--buttons {
  gap: 8px;
}

.insp-row--buttons .button {
  flex: 1;
}

.insp-row__label {
  width: 62px;
  color: var(--ink-muted);
  flex: none;
}

.insp-row__body {
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.insp-row__body > .field {
  flex: 1;
}

.insp-row--top {
  align-items: flex-start;
}

.insp-row__body--wrap {
  flex-wrap: wrap;
}

.insp-row__body--wrap > .field {
  flex: 7rem;
}

.insp-row__body--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.insp-row--stack {
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 6px;
}

.insp-row--stack .insp-row__label, .insp-row--stack .insp-row__body {
  flex-basis: 100%;
}

.insp-check {
  color: var(--ink);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.stepper {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: 6px;
  align-items: center;
  height: 24px;
  font-size: 12px;
  display: inline-flex;
  overflow: hidden;
}

.stepper__button {
  width: 22px;
  height: 100%;
  color: var(--ink-muted);
  cursor: pointer;
}

.stepper__button:hover {
  background-color: var(--tint);
  color: var(--ink);
}

.stepper__value {
  text-align: center;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  min-width: 28px;
  padding: 0 6px;
  font-weight: 500;
  line-height: 22px;
}

.stepper__value--set {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}

.timing-point {
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 2px 8px;
  padding: 3px 0;
  display: grid;
}

.timing-point__title {
  grid-column: 2 / 4;
}

.timing-point__note {
  grid-column: 2;
}

.timing-point__num {
  font-family: var(--font-serif);
  color: var(--accent);
  font-weight: 600;
}

.timing-point__title {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

.timing-point__note {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--ink-faint);
  font-size: 10.5px;
  overflow: hidden;
}

.timing-total {
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-muted);
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 6px;
  font-size: 11.5px;
  display: flex;
}

.timing-total b {
  color: var(--ink);
}

.insp-row__hint {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.3;
}

.insp-row__hint--line {
  white-space: nowrap;
}

.insp-warn {
  color: var(--danger, #b42318);
  margin: 6px 0 2px;
  font-size: 11px;
  line-height: 1.4;
}

.insp-hint {
  color: var(--ink-faint);
  padding: 8px 14px 0;
  font-size: 11px;
  line-height: 1.45;
}

.outline-panel__list {
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: flex;
}

.outline-panel__item {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  grid-template-columns: 1rem 1fr;
  align-items: baseline;
  column-gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  display: grid;
}

.outline-panel__item:hover {
  background-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .outline-panel__item:hover {
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  }
}

.outline-panel__item--active, .outline-panel__item--active:hover {
  background-color: var(--tint);
}

.outline-panel__marker {
  text-align: center;
  color: var(--block-accent);
  font-weight: 700;
}

.outline-panel__line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.outline-panel__kind {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  grid-column: 2;
  font-size: 10.5px;
}

.outline-panel__note {
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  display: inline-flex;
}

.outline-panel__empty, .outline-panel__hint {
  color: var(--ink-faint);
  padding: 12px 10px;
  font-size: 11px;
  line-height: 1.45;
}

.outline-panel__hint {
  border-top: 1px solid var(--border-subtle);
}

.related {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 8px 4px;
}

.related__title {
  color: var(--ink-muted);
  margin: 0 0 6px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
}

.related__group + .related__group {
  margin-top: 8px;
}

.related__label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  margin: 0;
  padding: 2px 8px;
  font-size: 10.5px;
}

.related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.related__item {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  font-size: 12.5px;
  display: flex;
}

.related__item:hover {
  background-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .related__item:hover {
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  }
}

.related__name {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.related__when {
  color: var(--ink-faint);
  flex: none;
  font-size: 11px;
}

.illus-panel {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.illus-panel__list {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.illus-panel__entry {
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  padding: 8px 10px;
}

.illus-panel__title {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

.illus-panel__title:hover {
  color: var(--accent);
}

.illus-panel__body {
  font-family: var(--font-serif);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.illus-panel__body--clamped {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.illus-panel__source {
  color: var(--ink-muted);
  margin: 4px 0 0;
  font-size: 11px;
}

.illus-panel__meta {
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  display: flex;
}

.illus-panel__meta .button {
  margin-left: auto;
}

.illus-panel__uses {
  border-top: 1px solid var(--rule);
  margin: 6px 0 0;
  padding: 6px 0 0;
  list-style: none;
}

.illus-panel__use {
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-size: 12px;
  display: flex;
}

.illus-panel__use--none {
  color: var(--ink-muted);
  font-style: italic;
}

.illus-panel__use-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.illus-panel__use-date {
  color: var(--ink-muted);
  flex: none;
}

.illus-panel__new {
  border-top: 1px solid var(--rule);
  flex-direction: column;
  flex: none;
  gap: 6px;
  padding: 10px;
  display: flex;
}

.illus-panel__new .field {
  width: 100%;
}

.illus-panel__textarea {
  resize: vertical;
  height: auto;
  font-family: var(--font-serif);
  padding: 6px 8px;
  line-height: 1.4;
}

.illus-panel__new-row {
  align-items: center;
  gap: 6px;
  display: flex;
}

.illus-panel__new-row .field {
  flex: 1;
  min-width: 0;
}

.illus-panel__error {
  margin: 0;
}

.confirm-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 12px;
  display: flex;
}

.confirm-row--inline {
  margin-top: 0;
}

.confirm-row__text {
  color: var(--ink-muted);
}

.editor-column {
  flex-direction: column;
  min-height: 0;
  display: flex;
  position: relative;
}

.dictation {
  z-index: 20;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 40px;
  box-shadow: var(--shadow-pop);
  white-space: nowrap;
  color: var(--ink);
  border-radius: 20px;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 14px;
  font-size: 12.5px;
  display: flex;
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
}

.dictation__dot {
  background-color: var(--accent);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px var(--tint);
  border-radius: 50%;
}

.dictation--paused .dictation__dot {
  background-color: var(--ink-faint);
  box-shadow: none;
}

.dictation__label {
  font-weight: 600;
}

.dictation__clock {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.dictation__meter {
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  display: inline-flex;
}

.dictation__bar {
  background-color: var(--hair);
  border-radius: 1px;
  width: 3px;
}

.dictation__bar:first-child {
  height: 5px;
}

.dictation__bar:nth-child(2) {
  height: 8px;
}

.dictation__bar:nth-child(3) {
  height: 11px;
}

.dictation__bar:nth-child(4) {
  height: 14px;
}

.dictation__bar:nth-child(5) {
  height: 9px;
}

.dictation__bar--on {
  background-color: var(--accent);
}

.dictation__hint {
  color: var(--ink-faint);
  font-size: 11px;
}

.dictation__mic {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  max-width: 14rem;
  height: 24px;
  font: inherit;
  color: var(--ink);
  text-overflow: ellipsis;
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11.5px;
}

.dictation__error {
  white-space: normal;
  color: #b45309;
  max-width: 24rem;
  font-size: 11px;
}

.dictation__button {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  height: 26px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 13px;
  align-items: center;
  padding: 0 10px;
  font-weight: 500;
  display: inline-flex;
}

.dictation__button:disabled {
  opacity: .5;
  cursor: default;
}

.dictation__button--done {
  border-color: var(--accent);
  background-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.editor-header {
  padding: var(--st-title-before, 0) 0 var(--st-title-after, 1.5em);
  flex: none;
}

.editor-title {
  width: 100%;
  font-family: var(--st-title-font, var(--page-font, var(--font-serif)));
  font-size: var(--st-title-size, 1.8em);
  font-weight: var(--st-title-weight, 700);
  font-style: var(--st-title-style, normal);
  line-height: var(--st-title-leading, 1.25);
  text-align: var(--st-title-align, left);
  letter-spacing: -.01em;
  color: var(--st-title-color, var(--ink));
  background: none;
  outline: none;
}

.editor-title::placeholder {
  color: var(--ink-faint);
}

.editor-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: .4em;
  font-size: 13px;
  display: flex;
}

.editor-field {
  align-items: center;
  gap: 6px;
  display: flex;
}

.editor-field__label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-size: 11px;
}

.editor-field__input {
  height: 26px;
  color: var(--ink);
  background-color: #0000;
  border: 1px solid #0000;
  border-radius: 6px;
  outline: none;
  padding: 0 8px;
  font-size: 13px;
}

.editor-field__input:hover, .editor-field__input:focus {
  border-color: var(--border-subtle);
  background-color: var(--surface-raised);
}

.editor-field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.editor-field__ghost {
  color: var(--ink-muted);
  cursor: pointer;
}

.editor-field__ghost:hover:not(:disabled) {
  color: var(--ink);
}

.editor-field--wide {
  flex: 14rem;
  min-width: 14rem;
}

.editor-log {
  align-items: flex-start;
  gap: 6px 14px;
  padding-top: .35em;
  font-size: 13px;
  display: flex;
}

.editor-log > .editor-field__label {
  padding-top: 5px;
}

.editor-log__list {
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.editor-log__row {
  height: 26px;
  color: var(--ink);
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.editor-log__minutes {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.editor-log__remove {
  color: var(--ink-faint);
  cursor: pointer;
  display: inline-flex;
}

.editor-log__remove:hover {
  color: var(--accent);
}

.editor-log__add {
  margin-top: .35em;
  font-size: 12px;
}

.editor-log__form {
  align-items: center;
  gap: 6px;
  display: flex;
}

.editor-log__form .field {
  height: 26px;
  font-size: 12.5px;
}

.editor-field--wide .editor-field__input {
  flex: 1;
  min-width: 0;
}

.editor-field__host {
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
}

.editor-field__host .editor-field__input {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.tagcomplete {
  z-index: 30;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 12rem;
  max-width: 20rem;
  box-shadow: var(--shadow-pop);
  border-radius: 8px;
  margin: 0;
  padding: 4px;
  list-style: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.tagcomplete__item {
  cursor: pointer;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  font-size: 12.5px;
  display: flex;
}

.tagcomplete__item--on, .tagcomplete__item:hover {
  background-color: var(--tint);
  color: var(--accent);
}

.tagcomplete__count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.editor-body {
  background-color: var(--ground);
  flex: 1;
  min-height: 0;
  padding: 28px 24px 6rem;
  overflow-y: auto;
}

.page-stage {
  width: 100%;
  position: relative;
}

.editor-body--preview {
  flex-direction: column;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.editor-notice {
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 32px;
  font-size: 13px;
  display: flex;
}

.editor-notice--warn {
  color: #78350f;
  background-color: #fffbeb;
}

.dark .editor-notice--warn {
  color: #fde68a;
  background-color: #f59e0b1f;
}

.editor-notice__text {
  flex: 24rem;
}

.editor-status {
  background-color: var(--bar);
  white-space: nowrap;
  height: 26px;
  color: var(--ink-muted);
  border-top: 0;
  flex: none;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  font-size: 11px;
  display: flex;
}

.editor-status__count, .editor-status__page {
  flex: none;
}

.editor-status--empty {
  margin-top: auto;
}

.editor-status__path {
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--ink-label);
  flex: 1;
  overflow: hidden;
}

.editor-status__save {
  color: var(--ink-faint);
  flex: none;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.editor-status__save > svg {
  color: #15803d;
}

.dark .editor-status__save > svg {
  color: #4ade80;
}

.editor-status__save--error {
  color: #dc2626;
}

.dark .editor-status__save--error {
  color: #f87171;
}

.menu {
  min-width: 17rem;
}

.menu__item {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.menu__item:hover:not(:disabled) {
  background-color: var(--tint);
}

.menu__item:disabled {
  opacity: .45;
  cursor: default;
}

.menu__item--danger:not(:disabled) {
  color: #b91c1c;
}

.dark .menu__item--danger:not(:disabled) {
  color: #f87171;
}

.menu__hint {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 400;
  display: block;
}

.menu__rule {
  background-color: var(--border-subtle);
  height: 1px;
  margin: 4px;
}

.menu__confirm {
  padding: 6px 8px;
  font-size: 13px;
}

.menu__confirm-actions {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.block-type-menu {
  z-index: 30;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  min-width: 19rem;
  box-shadow: var(--shadow-pop);
  text-transform: none;
  letter-spacing: normal;
  border-radius: 10px;
  padding: 6px;
  font-weight: 400;
  position: absolute;
  top: calc(100% + 4px);
  left: -4px;
}

.popover.block-type-menu {
  min-width: 20rem;
  top: calc(100% + 6px);
  left: 0;
}

.block-menu__group + .block-menu__group {
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
  padding-top: 4px;
}

.popover.block-menu--columns {
  grid-template-columns: 1fr 1fr;
  gap: 0 4px;
  min-width: 29rem;
  display: grid;
}

.block-menu--columns .block-menu__column {
  min-width: 0;
}

.block-type-menu__item--compact .block-type-menu__hint {
  display: none;
}

.popover.block-menu--columns {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

.block-menu--columns .block-menu__column + .block-menu__column {
  border-left: 1px solid var(--border-subtle);
  padding-left: 4px;
}

.block-menu__foot {
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  color: var(--ink-faint);
  border-radius: 0 0 10px 10px;
  grid-column: 1 / -1;
  margin: 4px -6px -6px;
  padding: 7px 12px;
  font-size: 11px;
}

.menu__item--row {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 10px;
}

.menu__item--row > svg {
  color: var(--ink-muted);
  flex: none;
}

.menu__key {
  color: var(--ink-faint);
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 400;
}

.share-menu, .save-menu {
  min-width: 16rem;
}

.tool-split .popover-host .save-menu {
  left: -46px;
}

.popover.changes-menu {
  min-width: 24rem;
  padding: 0;
  overflow: hidden;
}

.changes__caption {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 14px 4px;
  font-size: 10.5px;
  font-weight: 600;
}

.changes__list {
  max-height: 24rem;
  padding: 0 6px 6px;
  overflow-y: auto;
}

.changes__item {
  text-align: left;
  width: 100%;
  height: 28px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  font-size: 12.5px;
  display: flex;
}

.changes__item--in {
  background-color: var(--tint);
}

.changes__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.changes__when {
  color: var(--ink-faint);
  flex: none;
  font-size: 11px;
}

.changes__more {
  color: var(--ink-faint);
  padding: 4px 8px 2px;
  font-size: 11px;
}

.changes__foot {
  border-top: 1px solid var(--border-subtle);
  background-color: var(--surface-sunken);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
}

.changes__run {
  color: var(--accent);
  font-weight: 600;
}

.changes__hint {
  color: var(--ink-faint);
  font-size: 11px;
}

.block-type-menu__caption {
  color: var(--ink-faint);
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
}

.block-type-menu__item {
  text-align: left;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  grid-template-columns: 22px 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 5px 8px;
  display: grid;
}

.block-type-menu__item:hover, .block-type-menu__item--active {
  background-color: var(--tint);
}

.block-type-menu__marker {
  background-color: var(--block-accent, var(--ink-muted));
  color: #fff;
  width: 22px;
  height: 22px;
  font-family: var(--font-serif);
  border-radius: 6px;
  grid-row: span 2;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.block-type-menu__label {
  font-size: 13px;
  font-weight: 500;
}

.block-type-menu__hint {
  color: var(--ink-muted);
  grid-column: 2;
  font-size: 11px;
}

.block-type-menu__item--plain {
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 6px 6px;
  margin-top: 4px;
  padding-top: 8px;
}

.block-type-menu__move {
  border-top: 1px solid var(--border-subtle);
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
  display: grid;
}

.block-type-menu__move .block-type-menu__item {
  border-top: 0;
  margin-top: 0;
  padding-top: 8px;
}

.block-type-menu__move .block-type-menu__item:disabled {
  opacity: .4;
  cursor: default;
}

.block-type-menu__move .block-type-menu__item:disabled:hover {
  background-color: #0000;
}

.block-type-menu__spelling {
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

.block-type-menu__word {
  font-family: var(--font-serif);
  color: var(--ink);
  font-style: italic;
}

.block-type-menu__none {
  color: var(--ink-muted);
  padding: 4px 8px 6px;
  font-size: 12px;
}

.block-type-menu__suggestion {
  grid-template-columns: 1fr;
  padding-block: 5px;
}

.block-type-menu__suggestion .block-type-menu__label {
  font-family: var(--font-serif);
  font-size: 15px;
}

.block-type-menu__learn {
  grid-template-columns: 1fr;
  margin-top: 2px;
}

.block-type-menu__learn .block-type-menu__hint {
  grid-column: 1;
}

.slash-menu {
  min-width: 20rem;
  max-height: 24rem;
  position: static;
  overflow-y: auto;
}

.slash-menu__group + .slash-menu__group {
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
  padding-top: 4px;
}

.context-anchor {
  z-index: 40;
  width: 0;
  height: 0;
  position: fixed;
}

.row-menu {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  border-radius: 10px;
  padding: 6px;
  position: absolute;
  top: 0;
  left: 0;
}

.sermon-block {
  border-left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bn-block:has( > .react-renderer > .bn-block-content[data-content-type]) > .bn-block-group {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
}

.bn-block:has( > .bn-block-group) > .react-renderer > .bn-block-content > .sermon-block {
  margin-bottom: 0;
  padding-bottom: 0;
}

.bn-block:has( > .react-renderer > .bn-block-content > .sermon-block[data-line-spacing="1"]) > .bn-block-group {
  line-height: 1;
}

.bn-block:has( > .react-renderer > .bn-block-content > .sermon-block[data-line-spacing="1.15"]) > .bn-block-group {
  line-height: 1.15;
}

.bn-block:has( > .react-renderer > .bn-block-content > .sermon-block[data-line-spacing="1.5"]) > .bn-block-group {
  line-height: 1.5;
}

.bn-block:has( > .react-renderer > .bn-block-content > .sermon-block[data-line-spacing="2"]) > .bn-block-group {
  line-height: 2;
}

.page--painting .bn-editor {
  cursor: copy;
}

.sermon-block__label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: .375rem;
  font-size: .65rem;
  font-weight: 600;
  display: flex;
}

.sermon-block__heading {
  width: 100%;
  font-family: var(--font-serif);
  color: var(--ink);
  background: none;
  outline: none;
  padding: .125rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.sermon-block__heading:placeholder-shown {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 400;
}

.sermon-block__heading::placeholder {
  color: var(--ink-muted);
  opacity: .65;
  font-weight: 400;
}

.sermon-block__body, .sermon-block__body--serif {
  font-family: var(--font-serif);
}

.sermon-block__passage {
  align-items: baseline;
  gap: .5rem;
  display: flex;
}

.sermon-block__ref {
  min-width: 0;
  font-family: var(--font-serif);
  color: var(--ink);
  background: none;
  outline: none;
  flex: 1;
  padding: .125rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.sermon-block__ref:placeholder-shown {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 400;
}

.sermon-block__ref::placeholder, .sermon-block__version::placeholder {
  color: var(--ink-muted);
  opacity: .65;
  font-weight: 400;
}

.sermon-block__version {
  width: 4.5rem;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  background: none;
  outline: none;
  flex: none;
  padding: .125rem 0;
  font-size: .6875rem;
  font-weight: 600;
}

.sermon-block__version:focus, .sermon-block__ref:focus {
  color: var(--ink);
}

.sermon-block__reads {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  margin-top: .125rem;
  font-size: .6875rem;
}

.sermon-block__reads strong {
  color: var(--ink);
  font-weight: 600;
}

.sermon-block__reads--unread {
  color: var(--accent);
}

@media print {
  .sermon-block__reads {
    display: none;
  }
}

.sermon-block__body--scripture {
  font-style: italic;
  line-height: 1.6;
}

.sermon-block__labelrow {
  align-items: center;
  min-height: 1.25em;
  display: flex;
  position: relative;
}

.sermon-block__label--button {
  cursor: pointer;
  border-radius: .25rem;
  margin-left: -.25rem;
  padding: .0625rem .25rem;
}

.sermon-block__label--button:hover, .sermon-block__label--button[aria-expanded="true"] {
  background-color: var(--tint);
}

.sermon-block__label-caret {
  opacity: .6;
  font-size: .625rem;
}

.sermon-block__pagebreak {
  font-family: var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0 .5rem;
  font-size: .625rem;
  font-weight: 600;
  display: none;
}

.sermon-block__pagebreak:before, .sermon-block__pagebreak:after {
  content: "";
  border-top: 1px dashed var(--border-subtle);
  flex: 1;
}

.sermon-block__pagebreak:before {
  flex: 0 0 .5rem;
}

.sermon-block--image .sermon-block__picture {
  border-radius: .125rem;
  max-width: 100%;
  height: auto;
  max-height: 32rem;
  margin: .25rem 0;
  display: inline-block;
}

.sermon-block--image-small .sermon-block__picture {
  width: 33%;
}

.sermon-block--image-medium .sermon-block__picture {
  width: 66%;
}

.sermon-block__body--caption {
  color: var(--ink-muted);
  font-size: .875em;
}

.sermon-block__select {
  height: 22px;
  margin-left: auto;
  font-size: .7rem;
}

.page .bn-block-content[data-content-type="table"] table {
  font-family: var(--page-font, var(--font-serif));
  font-size: .95em;
}

.page .bn-block-content[data-content-type="table"] th {
  background-color: var(--surface);
  font-weight: 700;
}

.page {
  width: var(--paper-width, 8.5in);
  zoom: var(--page-zoom, 1);
  margin: 0 auto;
  font-size: 16px;
  position: relative;
}

.paper-stack {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.paper {
  box-sizing: border-box;
  width: var(--paper-width, 8.5in);
  height: var(--paper-height, 11in);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-page);
  border-radius: 2px;
  position: absolute;
  left: 0;
}

.paper__number {
  left: 0;
  right: 0;
  bottom: calc(var(--page-margin, .75in) * .4);
  text-align: center;
  font-family: var(--font-sans);
  color: var(--ink-muted);
  font-size: 10.5px;
  position: absolute;
}

.paper__head {
  top: calc(var(--page-margin, .75in) * .4);
  left: var(--page-margin, .75in);
  right: var(--page-margin, .75in);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  color: var(--ink-faint);
  font-size: 10.5px;
  position: absolute;
  overflow: hidden;
}

.page__flow {
  padding: var(--page-margin, .75in) var(--page-margin, .75in) 0;
  position: relative;
}

.page .bn-editor {
  font-family: var(--st-body-font, var(--page-font, var(--font-serif)));
  font-size: var(--st-body-size, 16px);
  font-weight: var(--st-body-weight, 400);
  font-style: var(--st-body-style, normal);
  line-height: var(--st-body-leading, var(--page-leading, 1.6));
  color: var(--st-body-color, var(--ink));
  padding-inline: 0;
}

.page .bn-block-outer {
  line-height: inherit;
}

.page .bn-block-content {
  padding: var(--st-body-before, 0) 0 var(--st-body-after, 12px);
}

.page .bn-block-content[data-style="quote"] > .bn-inline-content, .page .bn-block-content[data-style="quote"] .sermon-block__body {
  font-family: var(--st-quote-font);
  font-size: var(--st-quote-size);
  font-weight: var(--st-quote-weight);
  font-style: var(--st-quote-style);
  color: var(--st-quote-color);
  text-align: var(--st-quote-align);
  line-height: var(--st-quote-leading);
  padding-left: var(--st-quote-indent);
  border-left: var(--st-quote-rule);
  margin-top: var(--st-quote-before);
}

.page .bn-block-content[data-style="verse"] > .bn-inline-content, .page .bn-block-content[data-style="verse"] .sermon-block__body {
  font-family: var(--st-verse-font);
  font-size: var(--st-verse-size);
  font-weight: var(--st-verse-weight);
  font-style: var(--st-verse-style);
  color: var(--st-verse-color);
  text-align: var(--st-verse-align);
  line-height: var(--st-verse-leading);
  padding-left: var(--st-verse-indent);
  border-left: var(--st-verse-rule);
  margin-top: var(--st-verse-before);
}

.page .bn-block-content[data-style="small"] > .bn-inline-content, .page .bn-block-content[data-style="small"] .sermon-block__body {
  font-family: var(--st-small-font);
  font-size: var(--st-small-size);
  font-weight: var(--st-small-weight);
  font-style: var(--st-small-style);
  color: var(--st-small-color);
  text-align: var(--st-small-align);
  line-height: var(--st-small-leading);
  padding-left: var(--st-small-indent);
  border-left: var(--st-small-rule);
  margin-top: var(--st-small-before);
}

.page .bn-block-content[data-style="quote"] {
  padding-bottom: var(--st-quote-after);
}

.page .bn-block-content[data-style="verse"] {
  padding-bottom: var(--st-verse-after);
}

.page .bn-block-content[data-style="small"] {
  padding-bottom: var(--st-small-after);
}

.page .sermon-block__body, .page .sermon-block__body--serif {
  font-family: var(--page-font, var(--font-serif));
}

.page .sermon-block__heading:not(:placeholder-shown), .page .sermon-block__ref:not(:placeholder-shown) {
  font-family: var(--st-heading-font, var(--page-font, var(--font-serif)));
  font-size: var(--st-heading-size, 1.1em);
  font-weight: var(--st-heading-weight, 600);
  font-style: var(--st-heading-style, normal);
  color: var(--st-heading-color, var(--ink));
  text-align: var(--st-heading-align, left);
  line-height: var(--st-heading-leading, 1.3);
  margin-top: var(--st-heading-before, 0);
  padding-bottom: var(--st-heading-after, .125rem);
}

.page .sermon-block__label {
  font-size: var(--st-label-size, .65rem);
  font-weight: var(--st-label-weight, 600);
  font-style: var(--st-label-style, normal);
}

.page .bn-block-content[data-content-type="note"] .sermon-block__body {
  font-family: var(--st-note-font);
  font-size: var(--st-note-size);
  font-weight: var(--st-note-weight);
  font-style: var(--st-note-style);
  color: var(--st-note-color);
  line-height: var(--st-note-leading);
}

.page .bn-editor {
  counter-reset: footnote;
}

.key-line {
  background-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .key-line {
    background-color: color-mix(in srgb, var(--accent) 13%, transparent);
  }
}

.key-line {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 2px;
  padding: .05em 0;
}

.footnote-mark {
  counter-increment: footnote;
  font-family: var(--font-sans);
  vertical-align: super;
  color: var(--accent);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 3px;
  margin-left: .05em;
  padding: 0 .15em;
  font-size: .6em;
  font-weight: 700;
  line-height: 0;
  display: inline-block;
}

.footnote-mark:before {
  content: counter(footnote);
}

.footnote-mark:hover, .footnote-mark.ProseMirror-selectednode {
  background-color: var(--tint);
}

.paper__foot {
  left: var(--page-margin, .75in);
  right: var(--page-margin, .75in);
  bottom: var(--page-margin, .75in);
  box-sizing: border-box;
  font-family: var(--st-footnote-font, var(--page-font, var(--font-serif)));
  font-size: var(--st-footnote-size, 13.333px);
  font-weight: var(--st-footnote-weight, 400);
  font-style: var(--st-footnote-style, normal);
  line-height: var(--st-footnote-leading, 1.4);
  color: var(--st-footnote-color, var(--ink));
  position: absolute;
}

.paper__foot:before {
  content: "";
  border-top: 1px solid var(--hair);
  width: 33%;
  margin-bottom: 6px;
  display: block;
}

.paper__note {
  gap: 8px;
  padding-bottom: 2px;
  display: flex;
}

.paper__note-n {
  font-family: var(--font-sans);
  color: var(--accent);
  flex: none;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.foot-measure {
  visibility: hidden;
  pointer-events: none;
  top: 0;
  bottom: auto;
}

.footnote-card {
  z-index: 60;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  position: fixed;
}

.footnote-card__head {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 600;
}

.footnote-card__head b {
  color: var(--accent);
}

.footnote-card__text {
  box-sizing: border-box;
  resize: none;
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  width: 100%;
  font-family: var(--page-font, var(--font-serif));
  color: var(--ink);
  border-radius: 6px;
  outline: none;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 13.5px;
  line-height: 1.5;
  display: block;
}

.footnote-card__text:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.footnote-card__row {
  border-top: 1px solid var(--border-subtle);
  color: var(--ink-faint);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  font-size: 11px;
  display: flex;
}

.page-gap {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  display: block;
  position: relative;
}

.page-gap__label {
  left: 50%;
  bottom: calc(var(--page-margin, .75in) + var(--sheet-gap, 24px) / 2);
  font-family: var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  padding: 0 .5rem;
  font-size: .625rem;
  font-weight: 600;
  position: absolute;
  transform: translate(-50%, 50%);
}

.starter {
  border: 1px dashed var(--border-subtle);
  background-color: var(--surface-raised);
  font-size: .8125rem;
  font-family: var(--font-sans);
  border-radius: .625rem;
  margin: 0 0 1rem;
  padding: 1rem 1.125rem .875rem;
}

.starter__shapes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem;
  margin-top: .875rem;
  display: grid;
}

.starter__shape {
  min-width: 0;
  position: relative;
}

.starter__shape-pick {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  width: 100%;
  min-width: 0;
  box-shadow: var(--shadow-control);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: .625rem;
  flex-direction: column;
  gap: .375rem;
  padding: .75rem .875rem;
  display: flex;
}

.starter__shape-pick:hover {
  border-color: var(--hair);
  background-color: var(--surface);
}

.starter__shape-name {
  justify-content: space-between;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
}

.starter__tag {
  background-color: var(--tint);
  color: var(--accent);
  border-radius: .5rem;
  padding: .0625rem .375rem;
  font-size: .625rem;
  font-weight: 600;
}

.starter__shape-blocks {
  color: var(--ink-muted);
  font-size: .6875rem;
  line-height: 1.5;
}

.starter__shape-remove {
  width: 1rem;
  height: 1rem;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  background: none;
  border-radius: 50%;
  font-size: .8125rem;
  line-height: 1;
  position: absolute;
  top: .375rem;
  right: .375rem;
}

.starter__shape:hover .starter__shape-remove {
  opacity: 1;
}

.starter__shape-remove:hover {
  background-color: var(--tint);
  color: var(--accent);
}

.starter__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
}

.starter__body {
  color: var(--ink-muted);
  margin-top: .25rem;
  font-size: .8125rem;
}

.starter__actions {
  align-items: center;
  gap: .75rem;
  margin-top: .625rem;
  display: flex;
}

.starter__hint {
  color: var(--ink-faint);
  margin-top: .75rem;
  font-size: .75rem;
}

.bn-container, .bn-editor {
  color: var(--ink);
  background-color: #0000 !important;
}

.margin-notes {
  pointer-events: none;
  position: absolute;
  top: 0;
}

.margin-card {
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  background-color: var(--surface-raised);
  width: 200px;
  box-shadow: var(--shadow-control);
  pointer-events: auto;
  font-family: var(--font-sans);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 22px 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  position: absolute;
  left: 0;
}

.margin-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tint);
}

.margin-card__text {
  resize: none;
  width: 100%;
  font: inherit;
  color: inherit;
  field-sizing: content;
  background: none;
  border: 0;
  outline: none;
  padding: 0;
  display: block;
}

.margin-card__text::placeholder {
  color: var(--ink-faint);
}

.margin-card__delete {
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  background: none;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  position: absolute;
  top: 4px;
  right: 6px;
}

.margin-card:hover .margin-card__delete, .margin-card:focus-within .margin-card__delete {
  opacity: 1;
}

.margin-card__delete:hover {
  background-color: var(--tint);
  color: var(--accent);
}

.margin-marker {
  background-color: var(--tint);
  width: 18px;
  height: 18px;
  color: var(--accent);
  pointer-events: auto;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: absolute;
  left: 0;
}

.margin-marker:hover {
  background-color: var(--accent);
  color: #fff;
}

:root {
  --hl-yellow: #fde68a;
  --hl-green: #bbf7d0;
  --hl-blue: #bfdbfe;
  --hl-pink: #fbcfe8;
  --ink-red: #b91c1c;
  --ink-blue: #1d4ed8;
  --ink-green: #15803d;
  --ink-gray: #6b7280;
}

.dark {
  --hl-yellow: #facc1559;
  --hl-green: #4ade8052;
  --hl-blue: #60a5fa59;
  --hl-pink: #f472b659;
  --ink-red: #f87171;
  --ink-blue: #60a5fa;
  --ink-green: #4ade80;
  --ink-gray: #9ca3af;
}

.page [data-style-type="backgroundColor"][data-value="yellow"] {
  background-color: var(--hl-yellow);
}

.page [data-style-type="backgroundColor"][data-value="green"] {
  background-color: var(--hl-green);
}

.page [data-style-type="backgroundColor"][data-value="blue"] {
  background-color: var(--hl-blue);
}

.page [data-style-type="backgroundColor"][data-value="pink"] {
  background-color: var(--hl-pink);
}

.page [data-style-type="textColor"][data-value="red"] {
  color: var(--ink-red);
}

.page [data-style-type="textColor"][data-value="blue"] {
  color: var(--ink-blue);
}

.page [data-style-type="textColor"][data-value="green"] {
  color: var(--ink-green);
}

.page [data-style-type="textColor"][data-value="gray"] {
  color: var(--ink-gray);
}

.podium__hl {
  border-radius: .1em;
  padding: 0 .1em;
}

.podium--light .podium__hl--yellow {
  background-color: #fde68a;
}

.podium--light .podium__hl--green {
  background-color: #bbf7d0;
}

.podium--light .podium__hl--blue {
  background-color: #bfdbfe;
}

.podium--light .podium__hl--pink {
  background-color: #fbcfe8;
}

.podium--dark .podium__hl--yellow {
  background-color: #facc1566;
}

.podium--dark .podium__hl--green {
  background-color: #4ade8059;
}

.podium--dark .podium__hl--blue {
  background-color: #60a5fa66;
}

.podium--dark .podium__hl--pink {
  background-color: #f472b666;
}

.podium--light .podium__ink--red {
  color: #b91c1c;
}

.podium--light .podium__ink--blue {
  color: #1d4ed8;
}

.podium--light .podium__ink--green {
  color: #15803d;
}

.podium--light .podium__ink--gray {
  color: #6b7280;
}

.podium--dark .podium__ink--red {
  color: #f87171;
}

.podium--dark .podium__ink--blue {
  color: #60a5fa;
}

.podium--dark .podium__ink--green {
  color: #4ade80;
}

.podium--dark .podium__ink--gray {
  color: #9ca3af;
}

.find-bar {
  flex-direction: column;
  gap: .25rem;
  display: flex;
}

.find-bar__row {
  align-items: center;
  gap: .375rem;
  display: flex;
}

.find-bar__input {
  width: 16rem;
}

.find-bar__count, .find-bar__hint {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-size: .6875rem;
}

.find-bar__hint {
  margin-left: auto;
}

::highlight(find-match) {
  background-color: #facc1573;
}

::highlight(find-current) {
  color: #111;
  background-color: #f59e0b;
}

.find-anchor {
  z-index: 10;
  background-color: var(--surface);
  padding: .5rem 1.5rem 0;
  position: sticky;
  top: 0;
}

.sheet__backdrop {
  z-index: 50;
  padding-top: var(--topbar-h);
  background-color: #00000038;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: fixed;
  inset: 0;
}

.sheet {
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - var(--topbar-h) - 24px);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  flex-direction: column;
  gap: 12px;
  padding: 22px 26px 20px;
  animation: .16s cubic-bezier(.2, .7, .3, 1) sheet-drop;
  display: flex;
  overflow-y: auto;
  box-shadow: 0 24px 60px #0000004d;
}

@keyframes sheet-drop {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet {
    animation: none;
  }
}

.sheet--wide {
  gap: 0;
  max-width: 42rem;
  padding: 0;
}

.sheet__title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.sheet__lead {
  align-items: center;
  gap: 12px;
  display: flex;
}

.sheet__badge {
  background-color: var(--tint);
  width: 40px;
  height: 40px;
  color: var(--accent);
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.sheet__hint {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.sheet__hint code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.sheet__error {
  color: #dc2626;
  font-size: 12px;
}

.dark .sheet__error {
  color: #f87171;
}

.sheet__row {
  gap: 8px;
  display: flex;
}

.sheet__row .field {
  flex: 1;
}

.sheet__actions {
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
  display: flex;
}

.series-sheet__list {
  flex-direction: column;
  gap: 4px;
  max-height: 16rem;
  display: flex;
  overflow-y: auto;
}

.series-sheet__row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.series-sheet__name {
  flex: 1;
}

.series-sheet__count {
  white-space: nowrap;
  color: var(--ink-muted);
  font-size: 11px;
}

.series-page__kicker {
  margin-bottom: 4px;
}

.series-page__list {
  border-top: 1px solid var(--border-subtle);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.series-page__row {
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  display: grid;
}

.series-page__num {
  font-family: var(--font-serif);
  color: var(--accent);
  font-weight: 600;
}

.series-page__row--planned .series-page__num {
  color: var(--ink-faint);
}

.series-page__open {
  text-align: left;
  min-width: 0;
  color: var(--ink);
  cursor: pointer;
}

.series-page__row--planned .series-page__open {
  cursor: default;
}

.series-page__open b {
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.series-page__row--planned .series-page__open b {
  color: var(--ink-muted);
  font-style: italic;
}

.series-page__open small {
  color: var(--ink-muted);
  font-size: 11.5px;
  display: block;
}

.series-page__when {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11px;
}

.series-page__acts {
  align-items: center;
  gap: 10px;
  display: flex;
}

.series-page__passages {
  color: var(--ink-muted);
  margin-top: 10px;
  font-size: 11.5px;
}

.series-page__add {
  margin-top: 16px;
}

.series-page__fields {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-top: 4px;
  display: grid;
}

.series-page__row--tag {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tag-page__line {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 8px 0 0;
  font-size: 12.5px;
  display: flex;
}

.tag-page__label {
  color: var(--ink-faint);
  margin-right: 2px;
  font-size: 11px;
  font-weight: 600;
}

.tag-page__item {
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.tag-page__item:hover {
  text-decoration: underline;
}

.tag-page__item small {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.tidy__heading {
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.tidy__twins {
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

.tidy__list {
  border-top: 1px solid var(--border-subtle);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tidy__row {
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: minmax(0, 1fr) 40px auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12.5px;
  display: grid;
}

.tidy__row--twin .tidy__name {
  color: var(--ink-muted);
}

.tidy__row--retired .tidy__name {
  color: var(--ink-faint);
  text-decoration: line-through;
}

.tidy__count {
  text-align: right;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.tidy__acts {
  align-items: center;
  gap: 10px;
  display: flex;
}

.tidy__rename {
  grid-column: 1 / 4;
  align-items: center;
  gap: 8px;
  display: flex;
}

.tidy__rename .field {
  flex: 1;
}

.tidy__name {
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.tidy__pin {
  color: var(--ink-faint);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  padding: 0;
  display: inline-flex;
}

.tidy__pin:hover:not(:disabled) {
  color: var(--ink);
}

.tidy__pin--on, .tidy__pin--on:hover:not(:disabled) {
  color: var(--accent);
}

.tidy__pin--on svg {
  fill: currentColor;
}

.tidy__group {
  height: 24px;
  padding: 0 6px;
  font-size: 12px;
}

.tidy__groupname {
  height: 26px;
  font-size: 12.5px;
}

.sheet__backdrop:has(.coverage) {
  align-items: center;
  padding: 32px 24px;
}

.sheet.coverage {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: 12px;
  width: min(68rem, 100%);
  max-height: calc(100vh - 64px);
  padding: 22px 28px 26px;
  position: relative;
}

@media (max-width: 960px) {
  .sheet.coverage .coverage__testaments {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .sheet.coverage .coverage__tools {
    justify-content: flex-start;
    margin-top: 10px;
    position: static;
  }

  .sheet.coverage .coverage__ends {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .sheet.coverage .coverage__book {
    grid-template-columns: 6.4rem minmax(0, 1fr);
  }
}

.coverage .sheet__title {
  font-family: var(--font-serif);
  letter-spacing: -.005em;
  font-size: 20px;
  font-weight: 500;
}

.coverage__tools {
  align-items: center;
  gap: 16px;
  display: flex;
  position: absolute;
  top: 20px;
  right: 26px;
}

.coverage__eyebrow {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 18px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
}

.coverage__church {
  color: var(--ink-muted);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.coverage__church .field {
  min-width: 10rem;
}

.coverage__line {
  border-radius: 2px;
  flex: none;
  height: 14px;
  margin-top: 0;
  display: flex;
  overflow: hidden;
}

.coverage__mark {
  background-color: var(--ink);
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .coverage__mark {
    background-color: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}

.coverage__mark--alt {
  background-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .coverage__mark--alt {
    background-color: color-mix(in srgb, var(--ink) 11%, transparent);
  }
}

.coverage__mark--nt {
  border-left: 2px solid var(--surface-raised);
}

.coverage__mark--on {
  background-color: var(--accent);
  flex-basis: 2px;
  min-width: 2px;
}

.coverage__mark--mid {
  opacity: .62;
}

.coverage__mark--old, .coverage__mark--draft {
  opacity: .4;
}

.coverage__mark--plan {
  background-color: var(--tint-strong);
}

.coverage__ends {
  color: var(--ink-faint);
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  display: flex;
}

.coverage__ends > span:first-child, .coverage__ends > span:last-child {
  color: var(--ink-muted);
  font-weight: 500;
}

.coverage__sentence {
  max-width: 58ch;
  font-family: var(--font-serif);
  text-wrap: pretty;
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
}

.coverage__sentence em {
  color: var(--accent);
  font-style: italic;
}

.coverage__notes {
  color: var(--ink-muted);
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 6px 0 0;
  font-size: 12px;
  display: flex;
}

.coverage__legend {
  color: var(--ink-faint);
  gap: 14px;
  font-size: 10.5px;
  display: inline-flex;
}

.coverage__legend span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.coverage__legend .coverage__cell {
  width: 8px;
  height: 8px;
}

.coverage__testaments {
  border-top: 1px solid var(--rule);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
}

.coverage__testament-name {
  font-family: var(--font-serif);
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.coverage__testament-name small {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.coverage__sections {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 3px 0 8px;
  font-size: 11px;
  display: flex;
}

.coverage__sections b {
  color: var(--ink-muted);
  font-weight: 500;
}

.coverage__book {
  grid-template-columns: 7.4rem minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 4px 0;
  display: grid;
}

.coverage__name {
  text-align: left;
  color: var(--ink-faint);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
  padding: 1px 0 0;
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden;
}

.coverage__book--on .coverage__name {
  color: var(--ink);
  cursor: pointer;
}

.coverage__book--on .coverage__name:hover {
  color: var(--accent);
}

.coverage__name small {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-top: 1px;
  font-size: 10.5px;
  display: block;
}

.coverage__cells {
  flex-wrap: wrap;
  gap: 2px;
  display: flex;
}

.coverage__cell {
  background-color: var(--ink);
  border: 0;
  border-radius: 1.5px;
  width: 9px;
  height: 9px;
  padding: 0;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .coverage__cell {
    background-color: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}

.coverage__cell {
  cursor: default;
}

.coverage__book--on .coverage__cell {
  background-color: var(--ink);
}

@supports (color: color-mix(in lab, red, red)) {
  .coverage__book--on .coverage__cell {
    background-color: color-mix(in srgb, var(--ink) 10%, transparent);
  }
}

.coverage__cell.coverage__cell--on {
  background-color: var(--accent);
  cursor: pointer;
}

.coverage__cell--mid {
  opacity: .62;
}

.coverage__cell--old, .coverage__cell--draft {
  opacity: .4;
}

.coverage__cell.coverage__cell--plan {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background-color: #0000;
}

.coverage__cell--on.coverage__cell--plan {
  box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 3px var(--surface-raised);
}

.coverage__cell--on:hover, .coverage__cell--on:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  opacity: 1;
}

.shape-sheet__name {
  width: 100%;
}

.shape-sheet__preview {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.5;
}

.voice-sheet__head {
  align-items: center;
  gap: 12px;
  display: flex;
}

.voice-sheet__mark {
  background-color: var(--tint);
  width: 40px;
  height: 40px;
  color: var(--accent);
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.voice-sheet__progress {
  color: var(--ink-muted);
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.voice-sheet__track {
  background-color: var(--surface-sunken);
  border-radius: 3px;
  flex: 1;
  height: 6px;
  overflow: hidden;
}

.voice-sheet__fill {
  background-color: var(--accent);
  height: 100%;
  transition: width .2s;
  display: block;
}

.voice-sheet__pct {
  font-variant-numeric: tabular-nums;
}

.prefs__tabs {
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--bar);
  border-radius: 0;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  display: flex;
}

.prefs__tab {
  border-radius: var(--radius);
  width: 68px;
  color: var(--ink-muted);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 5px;
  font-size: 11px;
  display: flex;
}

.prefs__tab:hover {
  color: var(--ink);
}

.prefs__tab--on, .prefs__tab--on:hover {
  background-color: var(--tint);
  color: var(--ink);
}

.prefs__tab--on svg {
  color: var(--accent);
}

.prefs__body {
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 22px;
  display: flex;
}

.prefs__group {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.prefs__group-title {
  color: var(--ink-faint);
  padding-left: 2px;
  font-size: 11px;
  font-weight: 600;
}

.prefs__box {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: 8px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.prefs__row {
  min-height: 44px;
  color: var(--ink);
  border-top: 1px solid var(--border-subtle);
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  font-size: 13px;
  display: flex;
}

.prefs__row:first-child {
  border-top: 0;
}

.prefs__text {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.prefs__hint {
  color: var(--ink-muted);
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
}

.prefs__control {
  flex: none;
  align-items: center;
  gap: 8px;
  display: flex;
}

.prefs__inline {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.prefs__glyph {
  background-color: var(--tint);
  width: 30px;
  height: 30px;
  color: var(--accent);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.prefs__unit {
  color: var(--ink-muted);
  font-size: 12px;
}

.prefs__about {
  text-align: center;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.5;
}

.prefs__box .sheet__error {
  padding: 8px 14px 10px;
}

.prefs__themes {
  justify-content: center;
  gap: 22px;
  padding: 14px;
  display: flex;
}

.theme-card {
  color: var(--ink-muted);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  display: flex;
}

.theme-card--on {
  color: var(--ink);
  font-weight: 500;
}

.theme-card__swatch {
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  width: 76px;
  height: 50px;
  display: flex;
  overflow: hidden;
}

.theme-card--on .theme-card__swatch {
  box-shadow: 0 0 0 2px var(--accent);
}

.theme-card__side {
  flex: none;
  width: 22px;
}

.theme-card__page {
  flex: 1;
}

.theme-card__swatch--light {
  background-color: #fafaf9;
}

.theme-card__swatch--light .theme-card__side {
  background-color: #f0efed;
  border-right: 1px solid #e7e5e4;
}

.theme-card__swatch--dark {
  background-color: #0c0a09;
  border-color: #292524;
}

.theme-card__swatch--dark .theme-card__side {
  background-color: #1f1c1a;
  border-right: 1px solid #292524;
}

.theme-card__swatch--system {
  background: linear-gradient(100deg, #fafaf9 50%, #0c0a09 50%);
}

.theme-card__swatch--system .theme-card__side {
  background-color: #f0efed;
}

.styles {
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.styles__list {
  flex-direction: column;
  flex: none;
  gap: 8px;
  width: 200px;
  display: flex;
}

.styles__names {
  flex-direction: column;
  padding: 4px;
  display: flex;
}

.styles__name {
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: none;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  display: flex;
}

.styles__name:hover {
  background-color: var(--surface-sunken);
}

.styles__name--on, .styles__name--on:hover {
  background-color: var(--tint);
  color: var(--accent);
  font-weight: 600;
}

.styles__summary {
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 400;
}

.styles__name--on .styles__summary {
  color: var(--accent);
  opacity: .8;
}

.styles__note, .styles__hint {
  color: var(--ink-faint);
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.45;
}

.styles__pane {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.styles__row {
  border-top: 1px solid var(--border-subtle);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 13px;
  display: flex;
}

.styles__row:first-child {
  border-top: 0;
}

.styles__key {
  width: 64px;
  color: var(--ink-muted);
  flex: none;
}

.styles__toggles {
  gap: 4px;
  margin-left: 12px;
  display: inline-flex;
}

.field--short {
  width: auto;
}

.field--num {
  width: 3.5rem;
}

.styles__sample {
  border: 1px solid var(--border-subtle);
  background-color: var(--surface-raised);
  border-radius: 8px;
  padding: 14px 18px;
  overflow: hidden;
}

.styles__sample-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
}

.styles__actions {
  justify-content: flex-end;
  display: flex;
}

.notice {
  color: var(--ink-muted);
  background-color: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 20px;
  font-size: 12px;
  display: flex;
}

.notice--warn {
  border-bottom-color: #f59e0b;
}

.notice__message {
  flex: 20rem;
  min-width: 0;
}

.notice__actions {
  align-items: center;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.notice__error {
  color: #dc2626;
  flex-basis: 100%;
  font-size: 11px;
}

.dark .notice__error {
  color: #f87171;
}

.podium {
  z-index: 100;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  position: fixed;
  inset: 0;
}

.podium--dark {
  color: #f4f2ef;
  background-color: #08090b;
}

.podium--light {
  color: #17150f;
  background-color: #fdfcfa;
}

.podium__bar {
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1rem 2.5rem 0;
  font-size: .875rem;
  display: flex;
}

.podium__title, .podium__progress {
  opacity: .4;
}

.podium__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.podium__progress {
  font-variant-numeric: tabular-nums;
}

.podium__timer {
  font-variant-numeric: tabular-nums;
  opacity: .75;
  align-items: baseline;
  gap: .5em;
  font-weight: 600;
  line-height: 1;
  display: flex;
}

.podium__timer--paused {
  opacity: .55;
}

.podium__target {
  opacity: .5;
}

.podium__remaining {
  opacity: .6;
  font-size: .55em;
}

.podium__timer--over {
  color: #f59e0b;
}

.podium__timer--over .podium__target, .podium__timer--over .podium__remaining {
  opacity: .85;
}

.podium__paused-marker {
  font-family: var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .32em;
  font-weight: 600;
}

.podium__stage {
  justify-content: center;
  align-items: center;
  padding: 2rem 4rem;
  display: flex;
  overflow-y: auto;
}

.podium__slide {
  max-width: 46ch;
  font-family: var(--font-serif);
  line-height: 1.45;
}

.podium__kind, .podium__reference {
  font-family: var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  padding-bottom: .6em;
  font-size: .34em;
  font-weight: 600;
}

.podium__heading {
  padding-bottom: .35em;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.2;
}

.podium__body, .podium__scripture {
  white-space: pre-wrap;
}

.podium__scripture {
  font-style: italic;
}

.podium__empty {
  text-align: center;
  opacity: .6;
  max-width: 40ch;
  font-size: 1.25rem;
}

.podium__next {
  opacity: .4;
  align-items: baseline;
  gap: .75rem;
  padding: 0 2.5rem 1.25rem;
  font-size: 1rem;
  display: flex;
}

.podium__next-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
}

.podium__next-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.podium__help {
  background-color: #80808026;
  border-radius: .5rem;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  display: flex;
  position: absolute;
  bottom: 4rem;
  right: 2.5rem;
}

.podium__exit {
  opacity: .25;
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: .6875rem;
  position: absolute;
  bottom: 1.15rem;
  right: 1.5rem;
}

.podium__exit:hover {
  opacity: .7;
}

@media (max-width: 700px) {
  .podium__bar {
    gap: .75rem;
    padding: .75rem 1.25rem 0;
    font-size: .75rem;
  }

  .podium__progress {
    white-space: nowrap;
  }

  .podium__timer {
    font-size: 1.25rem !important;
  }

  .podium__remaining, .podium__chip {
    display: none;
  }

  .podium__stage {
    flex: 1;
    min-width: 0;
    padding: 1.25rem;
  }

  .podium__slide {
    max-width: min(46ch, 100%);
  }

  .podium--rail .podium__rail {
    display: none;
  }
}

.podium__margin {
  font-family: var(--font-sans);
  opacity: .7;
  border-left: 2px solid;
  margin: -.3em 0 .8em .6em;
  padding-left: .5em;
  font-size: .55em;
  line-height: 1.35;
}

.podium__quote {
  opacity: .92;
  border-left: 3px solid;
  padding-left: .6em;
  font-style: italic;
}

.podium__verse {
  padding-left: 1em;
}

.podium__small {
  opacity: .85;
  font-size: .8em;
}

.podium__body p {
  margin: 0 0 .45em;
}

.podium__table {
  border-collapse: collapse;
  width: 100%;
  font-size: .8em;
  line-height: 1.3;
}

.podium__table th, .podium__table td {
  text-align: left;
  vertical-align: top;
  border: 1px solid;
  padding: .3em .55em;
}

.podium__table th {
  font-weight: 700;
}

.podium__figure {
  margin: 0;
}

.podium__figure img {
  max-width: 100%;
  height: auto;
  max-height: 65vh;
  display: block;
}

.podium__figure--small img {
  width: 33%;
}

.podium__figure--medium img {
  width: 66%;
}

.podium__figure figcaption {
  opacity: .8;
  margin-top: .4em;
  font-size: .65em;
}

.podium__body ul, .podium__body ol {
  margin: .1em 0 .45em 1.2em;
  padding: 0;
}

.podium__body ul {
  list-style: outside;
}

.podium__body ol {
  list-style: decimal;
}

.podium__body li {
  margin: 0 0 .2em;
}

.podium--ready {
  grid-template-rows: 1fr;
}

.podium__ready {
  text-align: center;
  font-family: var(--font-sans);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.podium__ready-kick, .podium__ready-points {
  text-align: left;
  max-width: 34rem;
  margin: 1.6rem auto 0;
  padding: 0;
  font-size: .95rem;
  list-style: none;
}

.podium__ready-points li {
  opacity: .75;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 0 .6rem;
  padding: .2rem 0;
  display: grid;
}

.podium__ready-num {
  font-family: var(--font-serif, Georgia, serif);
  opacity: .7;
}

.podium__ready-head {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.podium__ready-min {
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.podium__ready-from {
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .45;
  font-size: .75rem;
  font-weight: 600;
}

.podium__ready-title {
  font-family: var(--font-serif);
  letter-spacing: -.01em;
  margin: .6rem 0 .4rem;
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.podium__ready-meta {
  opacity: .55;
  font-size: 1rem;
}

.podium__ready-from {
  margin-top: 3rem;
}

.podium__ready-choices {
  gap: .9rem;
  margin-top: .9rem;
  display: flex;
}

.podium__choice {
  text-align: left;
  width: 16rem;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  background-color: #80808014;
  border: 1px solid #80808040;
  border-radius: .75rem;
  padding: 1.1rem 1.1rem 1rem;
}

.podium__choice:hover {
  opacity: .9;
}

.podium__choice--on, .podium__choice--on:hover {
  opacity: 1;
  background-color: #c4646a29;
  border-color: #c4646a;
  box-shadow: 0 0 0 1px #c4646a;
}

.podium__choice-title {
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
}

.podium__choice-title kbd {
  font-family: var(--font-sans);
  opacity: .7;
  border: 1px solid #80808059;
  border-radius: .25rem;
  margin-left: auto;
  padding: 0 .4rem;
  font-size: .7rem;
  font-weight: 500;
}

.podium__choice-blurb {
  opacity: .8;
  margin-top: .4rem;
  font-size: .8rem;
  line-height: 1.45;
  display: block;
}

.podium__ready-go {
  margin-top: 2.6rem;
  font-size: .95rem;
}

.podium__ready-hint {
  opacity: .4;
  margin-top: .7rem;
  font-size: .75rem;
  line-height: 1.7;
}

.podium__ready-hint b, .podium__ready-go b {
  font-weight: 600;
}

@media (max-width: 700px) {
  .podium__ready {
    padding: 1.25rem 1rem;
    overflow-y: auto;
  }

  .podium__ready-title {
    font-size: clamp(1.75rem, 9vw, 3.4rem);
  }

  .podium__ready-choices {
    flex-direction: column;
    align-self: stretch;
    gap: .6rem;
  }

  .podium__choice {
    width: auto;
  }
}

.podium__layout {
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.podium__rail {
  width: 15.5rem;
  font-family: var(--font-sans);
  border-right: 1px solid #80808033;
  flex-direction: column;
  flex: none;
  gap: .2rem;
  padding: 1rem 0 1rem 1.75rem;
  display: flex;
  overflow-y: auto;
}

.podium__rail-head {
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .35;
  margin: 0 0 .5rem;
  font-size: .65rem;
  font-weight: 600;
}

.podium__rail-point {
  text-align: left;
  opacity: .5;
  border-radius: .5rem;
  grid-template-columns: 1.7rem 1fr;
  align-items: baseline;
  gap: .15rem .5rem;
  padding: .6rem .75rem .6rem 0;
  display: grid;
}

.podium__rail-go {
  text-align: left;
  color: inherit;
  cursor: pointer;
  display: contents;
}

.podium__rail-go:focus-visible .podium__rail-title {
  text-decoration: underline;
}

.podium__rail-point:hover {
  opacity: .8;
}

.podium__rail-point--done {
  opacity: .35;
}

.podium__rail-point--on, .podium__rail-point--on:hover {
  opacity: 1;
  background: linear-gradient(90deg, #c4646a38, #0000);
}

.podium__rail-num {
  font-family: var(--font-serif);
  color: #c4646a;
  font-size: .95rem;
  font-weight: 600;
}

.podium__rail-title {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
}

.podium__rail-min {
  cursor: default;
  opacity: .7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  grid-column: 2;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  display: flex;
}

.podium__rail-track {
  background-color: #80808040;
  border-radius: 2px;
  flex: 1;
  height: 3px;
  overflow: hidden;
}

.podium__rail-fill {
  background-color: #c4646a;
  height: 100%;
  display: block;
}

.podium__rail-fill--over {
  background-color: #f87171;
}

.podium__rail-keys {
  opacity: .35;
  margin-top: auto;
  padding-top: 1rem;
  font-size: .68rem;
  line-height: 1.7;
}

.podium__rail-keys b {
  font-weight: 500;
}

.podium__chip {
  color: #d98a8f;
  font-family: var(--font-sans);
  letter-spacing: .02em;
  background-color: #c4646a33;
  border-radius: .3em;
  margin-left: .9em;
  padding: .15em .5em;
  font-size: .42em;
  font-weight: 600;
}

.podium__chip--over {
  color: #f87171;
  background-color: #dc262633;
}

.podium__stage {
  flex: 1;
  min-width: 0;
}

.podium__stage:not(.podium__stage--cards) {
  flex-direction: column;
  min-height: 0;
  padding: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.podium__stage:not(.podium__stage--cards):after {
  content: "";
  background: linear-gradient(to bottom, transparent, var(--podium-bg, transparent));
  pointer-events: none;
  height: 6rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.podium--dark {
  --podium-bg: #08090b;
}

.podium--light {
  --podium-bg: #fdfcfa;
}

.podium__scroll {
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  min-height: 0;
  font-family: var(--font-serif);
  scrollbar-width: none;
  flex: 1;
  padding: 2rem 5rem 40vh;
  line-height: 1.45;
  overflow-y: auto;
}

.podium__scroll::-webkit-scrollbar {
  display: none;
}

.podium__block {
  max-width: 34em;
  margin: 0 0 1.2em;
}

.podium__kind--inline {
  opacity: .35;
  align-items: center;
  gap: .5em;
  padding-bottom: .3em;
  display: flex;
}

.podium__block--on .podium__kind--inline {
  opacity: .75;
  color: #c4646a;
}

.podium__kind--inline i {
  background-color: currentColor;
  border-radius: 50%;
  width: .55em;
  height: .55em;
}

.podium__heading--off {
  opacity: .3;
}

.podium__para {
  cursor: pointer;
  transition: opacity .18s;
}

.podium__para--off:hover, .podium__op--off:hover {
  opacity: .55;
}

.podium__heading--off {
  cursor: pointer;
}

.podium__para p {
  margin: 0 0 .55em;
}

.podium__para--off {
  opacity: .28;
}

.podium__para--on {
  opacity: 1;
}

.podium__marker {
  opacity: .6;
  width: 1em;
  margin-left: -1em;
  display: inline-block;
}

.podium__key {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: #c4646a3d;
  border-radius: .12em;
  padding: 0 .12em;
}

.podium__scroll-end {
  height: 30vh;
}

.podium__outline {
  padding-left: 3rem;
  padding-right: 3rem;
}

.podium__op {
  cursor: pointer;
  border-top: 1px solid #80808033;
  grid-template-columns: 2.2em 1fr;
  align-items: baseline;
  gap: .15em .6em;
  max-width: 40em;
  margin: 0 auto;
  padding: .8em 0 .7em;
  transition: opacity .18s;
  display: grid;
}

.podium__op--off {
  opacity: .3;
}

.podium__op-num {
  color: #c4646a;
  font-size: 1.15em;
  font-weight: 600;
}

.podium__op-head {
  margin: 0;
  font-size: 1.35em;
  font-weight: 600;
  line-height: 1.15;
}

.podium__op-key {
  grid-column: 2;
  margin: .1em 0 .3em;
  font-size: .95em;
  font-style: italic;
  line-height: 1.4;
}

.podium__op-key:before {
  content: "";
  background-color: #c4646a;
  border-radius: 50%;
  width: .3em;
  height: .3em;
  margin: 0 .5em .15em 0;
  display: inline-block;
}

.podium__op-line {
  opacity: .85;
  grid-column: 2;
  align-items: baseline;
  gap: .7em;
  font-size: .82em;
  line-height: 1.45;
  display: flex;
}

.podium__op-line--note {
  opacity: .65;
}

.podium__op-tag {
  width: 11em;
  font-family: var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  flex: none;
  padding-top: .4em;
  font-size: .55em;
  font-weight: 600;
}

.podium__op-ref {
  font-family: var(--font-sans);
  margin-right: .6em;
  font-size: .8em;
  font-weight: 600;
}

.podium__op-scripture {
  font-style: italic;
}

.podium__next-esc {
  opacity: .6;
  margin-left: auto;
  margin-right: 3.5rem;
  font-size: .7rem;
}

@media (max-width: 700px) {
  .podium__scroll {
    padding: 1.25rem 1.25rem 40vh;
    font-size: 1.25rem !important;
  }
}

.podium__begin {
  color: #fff;
  font-family: var(--font-sans);
  cursor: pointer;
  background-color: #c4646a;
  border-radius: .6rem;
  margin-top: 2.2rem;
  padding: .85rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.podium__begin:hover {
  background-color: #b0555b;
}

.podium__touch {
  font-family: var(--font-sans);
  opacity: .35;
  background-color: #80808024;
  border-radius: 999px;
  align-items: center;
  gap: .35rem;
  padding: .3rem;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
}

.podium__touch:hover, .podium__touch:focus-within {
  opacity: 1;
}

@media (pointer: coarse) {
  .podium__touch {
    opacity: .8;
    bottom: 3.6rem;
  }
}

.podium__touch-button {
  min-width: 2.75rem;
  height: 2.75rem;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0 .6rem;
  font-size: 1rem;
  line-height: 1;
}

.podium__touch-button:hover {
  background-color: #80808040;
}

.podium__touch-button--big {
  min-width: 3.4rem;
  font-size: 1.9rem;
  font-weight: 300;
}

.podium__touch-button--word {
  font-size: .8rem;
  font-weight: 500;
}

.podium__touch-button--on {
  color: #e39da1;
  background-color: #c4646a47;
}

.podium--light .podium__touch-button--on {
  color: #8a2b32;
  background-color: #9b2f3729;
}

.podium__touch-sep {
  background-color: #80808059;
  width: 1px;
  height: 1.6rem;
  margin: 0 .2rem;
}

.podium__touch-button--size {
  font-family: var(--font-serif);
  font-size: .85rem;
  font-weight: 600;
}

.podium__touch-button--size span {
  font-family: var(--font-sans);
  vertical-align: .15em;
  margin-left: .05rem;
  font-size: .7rem;
}

.podium__touch-button--sizeup {
  font-size: 1.05rem;
}

@keyframes podium-pulse {
  0% {
    opacity: .75;
    transform: scale(1);
  }

  30% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: .75;
    transform: scale(1);
  }
}

@keyframes podium-line {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }

  70% {
    opacity: 1;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

.podium--pulse .podium__timer {
  transform-origin: 100%;
  animation: 1.4s ease-in-out 2 podium-pulse;
}

.podium--pulse:before {
  content: "";
  transform-origin: 0;
  z-index: 2;
  background: linear-gradient(90deg, #c4646a, #0000);
  height: 3px;
  animation: 3.6s ease-out forwards podium-line;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.podium__timer--hidden {
  visibility: hidden;
}

.podium--no-key .podium__key, .podium--no-marks .podium__hl {
  background-color: #0000;
}

.podium--no-marks .podium__ink {
  color: inherit;
}

.podium__next--quiet {
  opacity: .25;
}

.podium__rail-adjust {
  gap: 2px;
  margin-right: .3rem;
  display: inline-flex;
}

.podium__rail-adjust button {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #80808059;
  border-radius: .25rem;
  justify-content: center;
  align-items: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  font-size: .75rem;
  display: inline-flex;
}

.podium__rail-adjust button:hover, .podium__rail-adjust button:focus-visible {
  background-color: #80808040;
}

.podium__sheet {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 24rem;
  font-family: var(--font-sans);
  z-index: 3;
  cursor: default;
  background-color: #141210f0;
  border-left: 1px solid #80808040;
  flex-direction: column;
  gap: .3rem;
  padding: 1.4rem 1.6rem;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: -20px 0 60px #00000059;
}

.podium--light .podium__sheet {
  background-color: #faf9f7f2;
}

.podium__sheet-title {
  align-items: center;
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
}

.podium__sheet-esc {
  opacity: .5;
  margin-left: auto;
  font-size: .7rem;
  font-weight: 500;
}

.podium__sheet-head {
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  margin: .8rem 0 .1rem;
  font-size: .65rem;
  font-weight: 600;
}

.podium__sheet-row {
  align-items: center;
  gap: .6rem;
  min-height: 2rem;
  font-size: .82rem;
  display: flex;
}

.podium__sheet-label {
  opacity: .7;
  flex: none;
  width: 7.2rem;
}

.podium__sheet-note-inline, .podium__sheet-note {
  opacity: .5;
  font-size: .72rem;
}

.podium__sheet-note {
  margin-top: auto;
  padding-top: 1rem;
  line-height: 1.5;
}

.podium__switch {
  cursor: pointer;
  background-color: #80808059;
  border-radius: 999px;
  flex: none;
  width: 2.1rem;
  height: 1.25rem;
  position: relative;
}

.podium__switch:after {
  content: "";
  background-color: #e7e5e4;
  border-radius: 50%;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  transition: left .12s;
  position: absolute;
  top: 2px;
  left: 2px;
}

.podium__switch--on {
  background-color: #c4646a;
}

.podium__switch--on:after {
  background-color: #fff;
  left: calc(.85rem + 2px);
}

.podium__sheet-seg {
  background-color: #80808014;
  border: 1px solid #80808040;
  border-radius: .45rem;
  flex: 1;
  padding: 2px;
  display: inline-flex;
}

.podium__sheet-seg--narrow {
  flex: none;
  width: 9rem;
}

.podium__sheet > .podium__sheet-seg {
  flex: none;
}

.podium__sheet-seg button, .podium__sheet-seg span {
  height: 1.5rem;
  font-family: var(--font-sans);
  color: inherit;
  opacity: .6;
  cursor: pointer;
  text-align: center;
  border-radius: .3rem;
  flex: 1;
  font-size: .78rem;
  line-height: 1.5rem;
}

.podium__sheet-seg .on {
  opacity: 1;
  background-color: #80808040;
}

.podium__end {
  text-align: center;
  font-family: var(--font-sans);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  display: flex;
}

.podium__end-big {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 1.6rem 0 0;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
}

.podium__end-big small {
  opacity: .5;
  margin-left: .6rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.podium__end-over {
  color: #f87171;
  margin-top: .5rem;
  font-weight: 600;
}

.podium__end-under {
  color: #86efac;
  margin-top: .5rem;
  font-weight: 600;
}

.podium__end-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 40rem;
  margin-top: 1.8rem;
  font-size: .9rem;
}

.podium__end-table th {
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  opacity: .5;
  border-bottom: 1px solid #8080804d;
  padding: 0 .9rem .5rem;
  font-size: .65rem;
  font-weight: 600;
}

.podium__end-table td {
  text-align: left;
  border-bottom: 1px solid #80808033;
  padding: .55rem .9rem;
}

.podium__end-table .r {
  text-align: right;
}

.podium__end-table .n {
  font-family: var(--font-serif);
  color: #c4646a;
  font-weight: 600;
}

.podium__end-table .bad {
  color: #f87171;
}

.podium__end-table .good {
  color: #86efac;
}

.podium__end-table .dim td {
  opacity: .5;
}

.podium__end-pace {
  opacity: .85;
  align-items: center;
  gap: .6rem;
  margin-top: 1.6rem;
  font-size: .9rem;
  display: flex;
}

.podium__end-pace b {
  font-weight: 600;
}

.podium__end-button {
  height: 2.2rem;
  color: inherit;
  font-family: var(--font-sans);
  cursor: pointer;
  background-color: #8080801f;
  border: 1px solid #80808059;
  border-radius: .5rem;
  align-items: center;
  padding: 0 1.1rem;
  font-size: .85rem;
  font-weight: 500;
  display: inline-flex;
}

.podium__end-button:hover {
  background-color: #80808040;
}

.podium__end-button--primary {
  color: #fff;
  background-color: #c4646a;
  border-color: #c4646a;
  font-weight: 600;
}

.podium__end-button--primary:hover {
  background-color: #b0555b;
}

.podium__end-actions {
  gap: .75rem;
  margin-top: 2rem;
  display: flex;
}

.podium__ready-actions {
  align-items: center;
  gap: .75rem;
  margin-top: 2.2rem;
  display: flex;
}

.podium__ready-actions .podium__begin {
  margin-top: 0;
}

.podium__ready-settings {
  height: 2.75rem;
  color: inherit;
  font-family: var(--font-sans);
  opacity: .75;
  cursor: pointer;
  border: 1px solid #80808059;
  border-radius: .6rem;
  padding: 0 1.2rem;
  font-size: .9rem;
  font-weight: 500;
}

.podium__ready-settings:hover {
  opacity: 1;
  background-color: #80808026;
}

.podium__end-keep {
  opacity: .7;
  margin-top: 1.4rem;
  font-size: .85rem;
}

.preview {
  background-color: var(--ground);
  flex: 1;
  min-height: 0;
  padding: 28px 40px 48px;
  overflow-y: auto;
}

.preview__sheet {
  box-sizing: border-box;
  width: var(--paper-width, 8.5in);
  min-height: var(--paper-height, 11in);
  padding: var(--page-margin, .75in);
  background-color: #fff;
  border-radius: 2px;
  margin: 0 auto;
  box-shadow: 0 1px 2px #0000001a, 0 14px 40px #00000029;
}

.preview__frame {
  background-color: #fff;
  border: 0;
  width: 100%;
  min-height: 4rem;
  display: block;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}