global.css

@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077,
    U+E007F;
  src: url("country-flag-emoji-polyfill/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--mantine-spacing-md);
  z-index: 400;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-md);
  background-color: var(--mantine-color-default);
  border: 1px solid var(--mantine-color-default-border);
  transition: top 100ms ease;
}

.skip-link:focus-visible {
  top: var(--mantine-spacing-xs);
}

.main-container:focus {
  outline: none;
}

.navbar-links {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.navbar-links::-webkit-scrollbar {
  display: none;
}

.app-navbar {
  visibility: visible;
  transition-property: transform, top, height, visibility;
}

@media (width < $mantine-breakpoint-sm) {
  .app-navbar[data-collapsed-mobile] {
    visibility: hidden;
  }
}

@media (width >= $mantine-breakpoint-sm) {
  .app-navbar[data-collapsed-desktop] {
    visibility: hidden;
  }
}

.navbar-notch {
  display: none;
  position: fixed;
  left: var(--app-shell-navbar-offset, 0rem);
  top: calc(var(--app-shell-header-offset, 0rem) + (100dvh - var(--app-shell-header-offset, 0rem)) / 2);
  transform: translateY(-50%);
  z-index: calc(var(--app-shell-navbar-z-index, 100) + 1);
  width: calc(0.875rem * var(--mantine-scale));
  height: calc(2.75rem * var(--mantine-scale));
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-dimmed);
  background-color: var(--mantine-color-body);
  border: 1px solid var(--app-shell-border-color);
  border-inline-start: none;
  border-radius: 0 var(--mantine-radius-sm) var(--mantine-radius-sm) 0;
  transition-property: left, color, background-color;
  transition-duration: var(--app-shell-transition-duration, 200ms);
  transition-timing-function: var(--app-shell-transition-timing-function, ease);
}

.navbar-notch:hover,
.navbar-notch:focus-visible {
  color: var(--mantine-color-text);
  background-color: var(--mantine-color-default-hover);
}

@media (width >= $mantine-breakpoint-sm) {
  .navbar-notch {
    display: flex;
  }
}

.main-region {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: region;
}

.main-container {
  max-width: calc(71.25rem * var(--mantine-scale));
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  container-type: inline-size;
  container-name: main;
}

.main-container[data-wide] {
  max-width: none;
}

.utility-title {
  min-height: calc(2.25rem * var(--mantine-scale));
}

.page-width-toggle {
  display: none;
}

@container region (min-width: 72rem) {
  .page-width-toggle {
    display: flex;
  }
}

.site-footer {
  margin-top: auto;
  padding-top: var(--mantine-spacing-xl);
}

.site-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(10rem * var(--mantine-scale)), 1fr));
  gap: var(--mantine-spacing-lg);
  padding-block: var(--mantine-spacing-lg);
  border-top: 1px solid var(--mantine-color-default-border);
}

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

.site-crumbs {
  min-width: 0;
}

.site-crumbs ol {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-crumb {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-sm);
  min-width: 0;
}

.site-crumb::before {
  content: "›";
  color: var(--mantine-color-dimmed);
  font-size: var(--mantine-font-size-lg);
}

.site-home {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-sm);
  flex: none;
}

.site-name {
  font-size: var(--mantine-h3-font-size);
  font-weight: var(--mantine-h3-font-weight);
  line-height: var(--mantine-h3-line-height);
}

.page-tool {
  display: contents;
}

.fill-screen {
  min-height: calc(100dvh - var(--app-shell-header-offset, 0rem) - 2 * var(--app-shell-padding, 0rem));
}

.page-article {
  max-width: calc(48rem * var(--mantine-scale));
  margin-top: var(--mantine-spacing-xl);
  padding-top: var(--mantine-spacing-lg);
  border-top: 1px solid var(--mantine-color-default-border);
}

.page-article .page-lede {
  font-size: var(--mantine-font-size-lg);
  color: var(--mantine-color-dimmed);
}

.page-article > section {
  margin-top: calc(1.5 * var(--mantine-spacing-xl));
}

.page-article h2 {
  font-size: var(--mantine-h3-font-size);
  line-height: var(--mantine-h3-line-height);
}

.page-article h3 {
  font-size: var(--mantine-h5-font-size);
  line-height: var(--mantine-h5-line-height);
}

.page-article pre {
  white-space: pre;
}

.page-article .page-table {
  overflow-x: auto;
  margin-bottom: var(--mantine-spacing-lg);
}

.page-article table {
  border-collapse: collapse;
  font-size: var(--mantine-font-size-sm);
}

.page-article th,
.page-article td {
  padding: calc(0.25rem * var(--mantine-scale)) var(--mantine-spacing-xs);
  border: 1px solid var(--mantine-color-default-border);
  text-align: left;
  vertical-align: top;
}

.utility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(15rem * var(--mantine-scale)), 1fr));
  gap: var(--mantine-spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.utility-grid > li {
  display: flex;
}

.utility-card {
  display: flex;
  flex-direction: column;
  gap: calc(0.25rem * var(--mantine-scale));
  width: 100%;
  padding: var(--mantine-spacing-md);
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-md);
  background-color: var(--mantine-color-default);
  transition: border-color 100ms ease;
}

.utility-card:hover,
.utility-card:focus-visible {
  border-color: var(--mantine-color-orange-6);
}

.utility-card-icon {
  color: var(--mantine-color-orange-6);
}

.settings-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--mantine-spacing-md);
}

.settings-row > * {
  flex: 1;
  min-width: 0;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .settings-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-row.has-error {
    gap: var(--mantine-spacing-xl);
  }
}

.editor-panes {
  display: flex;
  flex-direction: row;
  gap: var(--mantine-spacing-md);
  flex: 1;
  min-height: 0;
}

.editor-panes > * {
  flex: 1;
  min-width: 0;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .editor-panes {
    flex-direction: column;
  }

  .editor-panes > * {
    min-height: 16rem;
  }
}

.split-panes {
  display: flex;
  flex-direction: row;
  flex: 2;
  min-height: 12rem;
}

.split-panes > .split-main {
  flex: 1 1 0;
  min-width: 12rem;
}

.split-panes > .split-panel {
  flex: 0 1 var(--split-panel-width);
  min-width: 10rem;
}

.split-grip {
  flex: 0 0 var(--mantine-spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}

.split-grip::before {
  content: "";
  width: 2px;
  height: 2rem;
  border-radius: 2px;
  background-color: var(--mantine-color-dark-4);
}

.split-grip:hover::before,
.split-grip:focus-visible::before {
  background-color: var(--mantine-color-blue-5);
}

@container main (max-width: $mantine-breakpoint-sm) {
  .split-panes {
    flex-direction: column;
    gap: var(--mantine-spacing-md);
  }

  .split-panes > .split-grip {
    display: none;
  }

  .split-panes > .split-main {
    min-height: 16rem;
  }

  .split-panes > .split-panel {
    flex: 0 0 14rem;
  }
}

.split-pair {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.split-pair[data-direction="row"] {
  flex-direction: row;
}

.split-pair[data-direction="column"] {
  flex-direction: column;
}

.split-pair > .split-first,
.split-pair > .split-second {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.split-pair > .split-first > *,
.split-pair > .split-second > * {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.split-pair > .split-first {
  flex: 1 1 0;
}

.split-pair > .split-second {
  flex: 0 1 var(--split-size);
}

.split-pair[data-direction="row"] > .split-first {
  min-width: 14rem;
}

.split-pair[data-direction="row"] > .split-second {
  min-width: 12rem;
}

.split-pair[data-direction="column"] > .split-first,
.split-pair[data-direction="column"] > .split-second {
  min-height: 8rem;
}

.split-grip[data-direction="column"] {
  cursor: row-resize;
}

.split-grip[data-direction="column"]::before {
  width: 2rem;
  height: 2px;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .split-pair[data-direction="row"] {
    flex-direction: column;
  }

  .split-pair[data-direction="row"] > .split-grip {
    display: none;
  }

  .split-pair[data-direction="row"] > .split-first {
    min-height: 26rem;
  }

  .split-pair[data-direction="row"] > .split-second {
    flex: 0 0 18rem;
  }
}

.calculator-pad {
  display: flex;
  flex-direction: row;
  gap: var(--mantine-spacing-md);
}

.calculator-pad > .calculator-keys {
  display: grid;
  grid-template-columns: repeat(var(--calculator-columns), minmax(0, 1fr));
  gap: var(--mantine-spacing-xs);
  flex: var(--calculator-columns) 1 0;
}

.calculator-key[data-flash] {
  background-color: var(--mantine-color-orange-9);
  outline: 2px solid var(--mantine-color-orange-4);
  outline-offset: -2px;
}

.calculator-display {
  font-size: clamp(1.75rem, 7cqi, 2.75rem);
  line-height: 1.2;
}

.calculator-readout {
  overflow-x: auto;
}

.bit-grid {
  overflow-x: auto;
}

.calculator-history {
  max-height: 18rem;
  overflow-y: auto;
}

.calculator-history-row {
  padding: 2px var(--mantine-spacing-xs);
  border-radius: var(--mantine-radius-sm);
}

.calculator-history-row:hover {
  background-color: var(--mantine-color-default-hover);
}

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

.calculator-history-result {
  flex: none;
  white-space: nowrap;
}

.bit-key {
  width: 1.1rem;
  text-align: center;
  font-family: monospace;
  font-size: var(--mantine-font-size-sm);
  line-height: 1.4;
  border-radius: var(--mantine-radius-sm);
  color: var(--mantine-color-dimmed);
}

.bit-key[data-set="true"] {
  color: var(--mantine-color-orange-6);
}

[data-bit-field="sign"] {
  --bit-field: var(--mantine-color-grape-9);
}

[data-bit-field="exponent"] {
  --bit-field: var(--mantine-color-blue-9);
}

[data-bit-field="significand"] {
  --bit-field: transparent;
}

.bit-key[data-bit-field] {
  background-color: var(--bit-field);
}

.bit-key:hover {
  background-color: var(--mantine-color-default-hover);
}

.bit-field-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--mantine-radius-sm);
  border: 1px solid var(--mantine-color-dark-4);
  background-color: var(--bit-field);
}

@container main (max-width: $mantine-breakpoint-sm) {
  .calculator-pad {
    flex-direction: column;
  }
}

.converter-units {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 2px var(--mantine-spacing-md);
}

.converter-unit {
  padding: var(--mantine-spacing-xs);
  border-radius: var(--mantine-radius-sm);
}

.converter-unit[data-source] {
  background-color: var(--mantine-color-default-hover);
}

.converter-value {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.card-columns {
  display: flex;
  flex-direction: row;
  gap: var(--mantine-spacing-md);
}

.card-columns > * {
  flex: 1;
  min-width: 0;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .card-columns {
    flex-direction: column;
  }
}

.country-picker {
  max-width: calc(23rem * var(--mantine-scale));
}

.country-view {
  width: calc(12rem * var(--mantine-scale));
}

.country-view-row .mantine-ActionIcon-root {
  margin-bottom: calc(0.25rem * var(--mantine-scale));
}

.country-prefixes {
  max-height: calc(7rem * var(--mantine-scale));
  overflow-y: auto;
}

.country-map {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
}

svg.country-map {
  background: var(--mantine-color-body);
  border-radius: var(--mantine-radius-sm);
  stroke: var(--mantine-color-body);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.country-map-flight {
  transform-box: view-box;
  transform-origin: 0 0;
}

.country-map-land {
  fill: var(--mantine-color-grey-7);
}

.country-map path[data-reachable] {
  cursor: pointer;
}

.country-map-land[data-reachable]:hover {
  fill: var(--mantine-color-grey-6);
}

.country-map-neighbour {
  fill: var(--mantine-color-grey-5);
}

.country-map-neighbour:hover {
  fill: var(--mantine-color-grey-4);
}

.country-map-own {
  fill: var(--mantine-color-orange-6);
}

.country-flag {
  font-size: calc(2.5rem * var(--mantine-scale));
  line-height: 1;
}

.phone-number-flag {
  font-size: calc(2rem * var(--mantine-scale));
  line-height: 1;
}

.phone-number-figure {
  font-family: var(--mantine-font-family-monospace);
  font-size: clamp(1.35rem, 5cqi, 1.9rem);
  line-height: 1.3;
  overflow-x: auto;
  white-space: nowrap;
}

.ip-address-figure {
  font-family: var(--mantine-font-family-monospace);
  font-size: clamp(1.35rem, 5cqi, 1.9rem);
  line-height: 1.3;
  overflow-x: auto;
  white-space: nowrap;
}

.otp-code {
  font-family: var(--mantine-font-family-monospace);
  font-size: clamp(2rem, 9cqi, 3rem);
  line-height: 1.2;
  letter-spacing: 0.15em;
  overflow-x: auto;
}

.otp-code[data-mac] {
  font-size: var(--mantine-font-size-md);
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

.otp-countdown {
  height: calc(0.5rem * var(--mantine-scale));
  border-radius: var(--mantine-radius-xl);
  background-color: var(--mantine-color-default-hover);
  overflow: hidden;
}

.otp-countdown > .otp-countdown-bar {
  height: 100%;
  background-color: var(--mantine-color-orange-6);
  transform-origin: left;
  animation: otp-countdown var(--otp-period) linear infinite;
  animation-delay: var(--otp-elapsed);
}

.otp-countdown[data-low] > .otp-countdown-bar {
  background-color: var(--mantine-color-orange-2);
}

@keyframes otp-countdown {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .otp-countdown > .otp-countdown-bar {
    animation: none;
    transform: scaleX(var(--otp-remaining));
  }
}

.qr-code {
  width: var(--qr-code-width, calc(16rem * var(--mantine-scale)));
  max-width: 100%;
  background-color: #fff;
  border-radius: var(--mantine-radius-sm);
}

.qr-code > svg {
  display: block;
  width: 100%;
  height: auto;
}

.colour-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(4.5rem * var(--mantine-scale)), 1fr));
  gap: var(--mantine-spacing-xs);
}

.colour-swatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  text-align: center;
  border-radius: var(--mantine-radius-sm);
}

.colour-swatch:hover,
.colour-swatch:focus-visible {
  outline: 1px solid var(--mantine-color-default-border);
  outline-offset: 2px;
}

.colour-swatch[data-base] > .mantine-ColorSwatch-root {
  outline: 2px solid var(--mantine-color-bright);
  outline-offset: 2px;
}

.contrast-preview {
  padding: var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-sm);
  border: 1px solid var(--mantine-color-default-border);
}

.contrast-ratio {
  font-family: var(--mantine-font-family-monospace);
  font-size: calc(2rem * var(--mantine-scale));
  line-height: 1.2;
}

.contrast-large {
  font-size: calc(1.5rem * var(--mantine-scale));
  margin-top: var(--mantine-spacing-xs);
}

.contrast-body {
  font-size: calc(1rem * var(--mantine-scale));
  margin-top: 4px;
}

.colour-visions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(9rem * var(--mantine-scale)), 1fr));
  gap: var(--mantine-spacing-md);
}

.colour-vision-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(4.5rem * var(--mantine-scale));
  border-radius: var(--mantine-radius-sm);
  border: 1px solid var(--mantine-color-default-border);
}

.colour-vision-mark {
  width: 55%;
  height: 55%;
  border-radius: var(--mantine-radius-sm);
}

.absolute-error {
  position: absolute !important;
  top: calc(100% + var(--mantine-spacing-xs) / 2);
  left: 0;
}

.relative-root {
  position: relative !important;
}

.relative-root .mantine-Input-wrapper {
  margin-bottom: 0px !important;
}

.markdown-panes {
  display: flex;
  flex-direction: row;
  gap: var(--mantine-spacing-md);
  flex: 1;
  min-height: 0;
}

.markdown-panes > * {
  flex: 1;
  min-width: 0;
}

.markdown-panes[data-view="editor"] > .markdown-preview-pane,
.markdown-panes[data-view="preview"] > .markdown-editor-pane {
  display: none;
}

.markdown-editor-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.markdown-editor-pane[data-dragging] {
  border-color: var(--mantine-color-orange-4);
}

.markdown-toolbar {
  flex: none;
  padding: var(--mantine-spacing-xs);
  border-bottom: 1px solid var(--mantine-color-default-border);
  row-gap: var(--mantine-spacing-xs);
}

.markdown-editor-host {
  position: relative;
  flex: 1;
  min-height: 0;
}

.markdown-preview-pane {
  position: relative;
  overflow: hidden;
}

.markdown-preview {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: var(--mantine-spacing-md);
  contain: paint;
}

.markdown-preview li:has(> input[type="checkbox"]) {
  list-style: none;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .markdown-panes {
    flex-direction: column;
  }

  .markdown-panes > * {
    min-height: 16rem;
  }
}

.docx-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 32rem;
  overflow: hidden;
}

.docx-host {
  position: relative;
  flex: 1;
  min-height: 0;
}

.docx-host > .docx-editor {
  position: absolute;
  inset: 0;
}

.docx-host .docx-editor.dark {
  --primary: 14 100% 63%;
  --accent-foreground: 14 100% 63%;
  --ring: 14 100% 63%;
  --doc-surface: var(--mantine-color-dark-7);
  --doc-bg: var(--mantine-color-dark-6);
  --doc-card: var(--mantine-color-dark-6);
  --doc-bg-subtle: var(--mantine-color-dark-5);
  --doc-bg-hover: var(--mantine-color-dark-5);
  --doc-bg-input: var(--mantine-color-dark-6);
  --doc-border: var(--mantine-color-dark-4);
  --doc-border-light: var(--mantine-color-dark-5);
  --doc-border-input: var(--mantine-color-dark-4);
  --doc-text: var(--mantine-color-text);
  --doc-text-muted: var(--mantine-color-dimmed);
  --doc-primary: var(--mantine-color-orange-6);
  --doc-primary-hover: var(--mantine-color-orange-5);
  --doc-primary-light: rgba(255, 112, 67, 0.18);
  --doc-accent: var(--mantine-color-orange-6);
  --doc-accent-bg: rgba(255, 112, 67, 0.12);
  --doc-on-primary: #121212;
  --doc-link: var(--mantine-color-orange-4);
  --doc-focus-ring: rgba(255, 112, 67, 0.45);
  --doc-selection: rgba(255, 112, 67, 0.3);
}

.docx-host:not([data-paper="dark"]) .docx-editor.dark {
  --doc-page-bg: #ffffff;
  --doc-page-bg-rendered: #ffffff;
  --doc-page-text: #000000;
  --doc-caret: #202124;
  --doc-caret-contrast: #ffffff;
}

.docx-host:not([data-paper="dark"]) .docx-editor.dark .docx-page-content,
.docx-host:not([data-paper="dark"]) .docx-editor.dark .docx-page-content :is(
  [data-no-color-invert],
  [data-highlight],
  canvas,
  img,
  svg,
  video
) {
  filter: none;
}

@media screen {
  .docx-host[data-paper="dark"] .docx-page > :not(.docx-page-content, .docx-hf--placeholder, .docx-hf-edit-hint) {
    filter: invert(1) hue-rotate(180deg) contrast(0.92);
  }

  .docx-host[data-paper="dark"] .docx-page > :not(.docx-page-content) :is(
    [data-no-color-invert],
    [data-highlight],
    canvas,
    img,
    svg,
    video
  ) {
    filter: invert(1) hue-rotate(180deg);
  }
}

.docx-editor :is(
  [data-slot="review.comments"],
  [data-slot="review.editingMode"],
  [data-slot="review.previousChange"],
  [data-slot="review.nextChange"],
  [data-slot="review.acceptAllChanges"],
  [data-slot="review.rejectAllChanges"]
) {
  display: none;
}

.pdf-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 32rem;
  overflow: hidden;
}

.pdf-document {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pdf-toolbar {
  padding: var(--mantine-spacing-xs);
  border-bottom: 1px solid var(--mantine-color-default-border);
  background-color: var(--mantine-color-dark-7);
}

.pdf-toolbar .mantine-ActionIcon-root:disabled {
  background-color: transparent;
  opacity: 0.35;
}

.pdf-host {
  position: relative;
  flex: 1;
  min-height: 0;
}

.pdf-viewport {
  position: absolute;
  inset: 0;
  background-color: var(--mantine-color-dark-8);
}

.pdf-page {
  background-color: #ffffff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.pdf-waiting {
  flex: 1;
  min-height: 16rem;
  padding: var(--mantine-spacing-md);
}

.pdf-float {
  position: absolute;
  pointer-events: auto;
  cursor: default;
  padding: 2px;
  white-space: nowrap;
}

.pdf-signature-pad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10rem;
  background-color: #ffffff;
  border: 1px dashed var(--mantine-color-gray-5);
  border-radius: var(--mantine-radius-md);
  color-scheme: light;
  overflow: hidden;
}

.pdf-signature-upload {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdf-signature-preview {
  display: block;
  height: 2.5rem;
  max-width: 12rem;
  padding: 2px 6px;
  object-fit: contain;
  background-color: #ffffff;
  border-radius: var(--mantine-radius-sm);
}

.csv-panes {
  display: flex;
  flex-direction: column;
  gap: var(--mantine-spacing-md);
  flex: 1;
  min-height: 0;
}

.csv-panes > * {
  position: relative;
  overflow: hidden;
  min-height: 8rem;
}

.csv-panes > .csv-text-pane {
  flex: 2;
}

.csv-panes > .csv-table-pane {
  flex: 3;
}

.csv-panes[data-view="text"] > .csv-table-pane,
.csv-panes[data-view="table"] > .csv-text-pane {
  display: none;
}

.curl-command {
  overflow: hidden;
}

.regex-pattern {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-xs);
}

.regex-pattern-box {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-sm);
  overflow: hidden;
}

.regex-delimiter {
  font-family: var(--mantine-font-family-monospace);
  color: var(--mantine-color-dimmed);
  white-space: nowrap;
}

.regex-subject {
  position: relative;
  overflow: hidden;
  height: 22rem;
}

.regex-swatch {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  border-radius: 3px;
  border: 1px solid var(--mantine-color-default-border);
}

.regex-children {
  margin-left: var(--mantine-spacing-xs);
  padding-left: var(--mantine-spacing-sm);
  border-left: 1px solid var(--mantine-color-default-border);
}

.regex-raw {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.schema-problem {
  border-radius: var(--mantine-radius-sm);
  padding: 2px 4px;
}

.schema-problem:hover {
  background-color: var(--mantine-color-dark-6);
}

.schema-pointer {
  flex-shrink: 0;
  font-size: var(--mantine-font-size-xs);
}

.image-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 60vh;
  border-radius: var(--mantine-radius-sm);
  overflow: hidden;
  background-color: var(--mantine-color-dark-8);
  background-image: linear-gradient(45deg, var(--mantine-color-dark-6) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mantine-color-dark-6) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mantine-color-dark-6) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mantine-color-dark-6) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.image-frame {
  flex: none;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
}

.image-turn {
  grid-area: 1 / 1;
  position: relative;
}

.image-turn > img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.image-crop-layer {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.image-crop {
  position: absolute;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
  outline: 1px solid var(--mantine-color-orange-4);
}

.image-crop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%,
      rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%,
      rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255, 255, 255, 0.35) 33.33%,
      rgba(255, 255, 255, 0.35) calc(33.33% + 1px), transparent calc(33.33% + 1px), transparent 66.66%,
      rgba(255, 255, 255, 0.35) 66.66%, rgba(255, 255, 255, 0.35) calc(66.66% + 1px), transparent calc(66.66% + 1px));
  pointer-events: none;
}

.image-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--mantine-color-orange-4);
  border-radius: 2px;
}

.file-dropzone {
  border: 2px dashed var(--mantine-color-default-border);
  border-radius: var(--mantine-radius-md);
  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 100ms ease, background-color 100ms ease;
}

.file-dropzone:hover,
.file-dropzone:focus-visible {
  border-color: var(--mantine-color-orange-6);
}

.file-dropzone[data-dragging] {
  border-color: var(--mantine-color-orange-4);
  background-color: var(--mantine-color-dark-6);
}

.image-data-uri textarea {
  font-family: var(--mantine-font-family-monospace);
  font-size: var(--mantine-font-size-xs);
}

.panel-chevron {
  transition: transform 150ms ease;
}

.panel-chevron[data-open] {
  transform: rotate(90deg);
}

.hex-editor {
  overflow: hidden;
}

.hex-editor .cm-editor {
  font-variant-ligatures: none;
}

.hex-editor .cm-lineNumbers .cm-gutterElement {
  padding: 0 var(--mantine-spacing-xs) 0 var(--mantine-spacing-sm);
  color: var(--mantine-color-dimmed);
}

.hex-editor .cm-hex-text {
  display: inline-block;
  white-space: pre;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .har-meta {
    display: none;
  }
}

.har-body {
  max-height: calc(24rem * var(--mantine-scale));
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.har-image {
  max-width: 100%;
  width: fit-content;
}

.character-row {
  cursor: pointer;
}

.character-row[data-selected] {
  background-color: var(--mantine-color-dark-5);
}

.keyboard-panes {
  display: flex;
  flex-direction: row;
  gap: var(--mantine-spacing-md);
  height: calc(22rem * var(--mantine-scale));
}

.keyboard-menu {
  flex: 0 0 calc(12rem * var(--mantine-scale));
  min-width: 0;
  padding-right: var(--mantine-spacing-xs);
  border-right: 1px solid var(--mantine-color-dark-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.keyboard-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: calc(0.25rem * var(--mantine-scale));
  background-color: var(--mantine-color-dark-6);
}

.keyboard-section {
  padding: calc(0.4rem * var(--mantine-scale)) var(--mantine-spacing-xs) calc(0.15rem * var(--mantine-scale));
}

.keyboard-option {
  padding: calc(0.2rem * var(--mantine-scale)) var(--mantine-spacing-xs);
  border-radius: var(--mantine-radius-sm);
  scroll-margin-top: calc(2.75rem * var(--mantine-scale));
}

.keyboard-option .mantine-NavLink-label {
  line-height: 1.35;
}

.keyboard-keys {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

@container main (max-width: $mantine-breakpoint-sm) {
  .keyboard-panes {
    flex-direction: column;
    height: auto;
  }

  .keyboard-menu {
    flex: none;
    max-height: calc(14rem * var(--mantine-scale));
    padding-right: 0;
    padding-bottom: var(--mantine-spacing-xs);
    border-right: none;
    border-bottom: 1px solid var(--mantine-color-dark-4);
  }

  .keyboard-keys {
    flex: none;
  }

  .character-keys {
    max-height: calc(18rem * var(--mantine-scale));
  }
}

.character-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(2.75rem * var(--mantine-scale)), 1fr));
  gap: var(--mantine-spacing-xs);
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.character-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.25rem * var(--mantine-scale));
  padding: 0 calc(0.25rem * var(--mantine-scale));
  border: 1px solid var(--mantine-color-dark-4);
  border-radius: var(--mantine-radius-sm);
  font-size: var(--mantine-font-size-lg);
  line-height: 1.1;
  overflow: hidden;
}

.character-key:hover {
  background-color: var(--mantine-color-dark-5);
}

.character-key[data-invisible] {
  font-size: var(--mantine-font-size-xs);
  font-family: var(--mantine-font-family-monospace);
  color: var(--mantine-color-dimmed);
}

.zone-dropdown .mantine-ScrollArea-content {
  min-width: 0;
}

.zone-row {
  max-width: 100%;
}

.zone-option {
  width: 100%;
  min-width: 0;
}

.zone-option .zone-match {
  min-width: 0;
}