.artifact-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-base);
  overflow: hidden;
  border: var(--border-width-base) solid var(--border-color-subtle);
  background-color: var(--background-color-base);
}

.artifact-view .artifact-header, .artifact-view .artifact-footer {
  display: flex;
  align-items: center;
  background-color: var(--background-color-base);
}

.artifact-view .artifact-header {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-block-end: var(--border-width-base) solid var(--border-color-subtle);
  min-height: var(--min-size-interactive-touch);
}

.artifact-view .artifact-header-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-width: 0;
  padding: var(--spacing-8);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.artifact-view .artifact-header-row::-webkit-scrollbar {
  display: none !important;
}

.artifact-view .artifact-header-actions {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
}

.artifact-view .artifact-header-bar {
  min-width: 0;
}

.artifact-view .artifact-header-bar-panel {
  min-width: 0;
  padding: var(--spacing-8);
}

.artifact-view .artifact-header-bar[data-open='false'] {
  display: none;
}

.artifact-view .artifact-page-nav, .artifact-view .artifact-xml-toggle, .artifact-view .artifact-reflow-toggle, .artifact-view .artifact-detach-toggle, .artifact-view .artifact-overlay-toggle {
  flex-shrink: 0;
}

.artifact-view[data-pages-known='false'] .artifact-page-nav {
  visibility: hidden;
}

.artifact-view[data-canvas-confirmed='false'] .artifact-canvas-toggle {
  display: none;
}

.artifact-view .artifact-raw-info {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.artifact-view .artifact-footer-start {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--spacing-8);
  min-width: 0;
}

.artifact-view .artifact-viewer-container {
  flex: 1;
  display: flex;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .artifact-view .artifact-viewer-container {
    flex-direction: column !important;
  }
}

.artifact-view .artifact-object {
  flex: 1 1 50%;
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.artifact-view .artifact-markup-frame {
  flex: 1 1 50%;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.artifact-view .artifact-markup-frame > .artifact-markup {
  width: 100%;
  height: 100%;
}

.artifact-view .artifact-markup {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
  border-inline-end: var(--border-width-base) solid var(--border-color-subtle);
  background-color: var(--background-color-base);
}

@media (max-width: 768px) {
  .artifact-view .artifact-markup {
    border-inline-end: none !important;
    border-block-end: var(--border-width-base) solid var(--border-color-subtle) !important;
  }
}

.artifact-view[data-canvas-shown='false'] .artifact-object {
  display: none;
}

.artifact-view[data-canvas-shown='false'] .artifact-markup {
  border-inline-end: none !important;
  border-block-end: none !important;
}

.artifact-view:has(.artifact-xml-toggle[aria-pressed='true']) .artifact-markup [data-layer='rendering'] {
  display: none;
}

.artifact-view:has(.artifact-xml-toggle[aria-pressed='true']) .artifact-markup [data-layer='markup'] {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.artifact-view .artifact-markup .tei-page-text {
  overflow: visible !important;
}

.artifact-view:not([data-reflow='true']) .artifact-markup [data-layer] {
  width: max-content !important;
  max-width: none !important;
}

.artifact-view .artifact-markup [data-layer='rendering'], .artifact-view .artifact-markup [data-layer='translated-rendering'] {
  cursor: inherit !important;
}

.artifact-view .artifact-markup[data-over-text='true'] {
  cursor: text;
}

.artifact-view .artifact-markup[data-dragging='true'] {
  cursor: grabbing;
}

.artifact-view .artifact-markup {
  touch-action: pan-x pan-y;
  overflow-anchor: none;
  overscroll-behavior: contain;
  cursor: grab;
}

.artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-markup-frame, .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-object {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 50%;
  height: 100%;
  transition: width 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), height 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), inset-inline-start 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), inset-block-start 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1);
  will-change: width, height, inset-inline-start, inset-block-start;
}

@media (max-width: 768px) {
  .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-markup-frame, .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-object {
    width: 100%;
    height: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-markup-frame, .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-object {
    transition: none;
  }
}

.artifact-view[data-canvas-shown='true']:not([data-overlay-registered='true']):has(.artifact-markup-frame) .artifact-object {
  transition: width 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), height 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), inset-inline-start 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), inset-block-start 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1), opacity 400ms cubic-bezier(0.420000000000000017763568394002504646778106689453125, 0, 0.579999999999999982236431605997495353221893310546875, 1);
}

@media (prefers-reduced-motion: reduce) {
  .artifact-view[data-canvas-shown='true']:not([data-overlay-registered='true']):has(.artifact-markup-frame) .artifact-object {
    transition: none;
  }
}

.artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-object {
  inset-inline-start: 50%;
}

@media (max-width: 768px) {
  .artifact-view[data-canvas-shown='true']:has(.artifact-markup-frame) .artifact-object {
    inset-inline-start: 0;
    inset-block-start: 50%;
  }
}

.artifact-view[data-overlay-active='true'] .artifact-object, .artifact-view[data-overlay-active='true'] .artifact-markup-frame {
  inset-inline-start: 0 !important;
  inset-block-start: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.artifact-view[data-overlay-active='true'] .artifact-viewer-container {
  display: block;
}

.artifact-view[data-overlay-active='true'] .artifact-object, .artifact-view[data-overlay-active='true'] .artifact-markup-frame {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
}

.artifact-view[data-overlay-active='true'] .artifact-markup-frame {
  z-index: 1;
}

.artifact-view[data-overlay-active='true']:not([data-overlay-registered='true']) .artifact-markup-frame {
  pointer-events: none;
}

.artifact-view[data-overlay-active='true'] .artifact-markup {
  background-color: transparent !important;
  overflow: hidden !important;
}

.artifact-view[data-overlay-active='true'] .canvas-viewport {
  touch-action: none;
}

.artifact-view .artifact-detach-toggle[aria-pressed='true'] .button-view:disabled {
  background-color: var(--background-color-blue) !important;
  border-color: var(--background-color-blue) !important;
  opacity: 0.5;
}

.artifact-view .artifact-detach-toggle[aria-pressed='true'] .button-view:disabled .button-icon, .artifact-view .artifact-detach-toggle[aria-pressed='true'] .button-view:disabled .button-label {
  color: var(--color-on-solid) !important;
}

.artifact-view[data-overlay-active='true'] .artifact-object {
  opacity: 0.5;
}

.artifact-view[data-overlay-registered='true'] .artifact-markup-frame {
  z-index: 1;
}

.artifact-view[data-overlay-registered='true'] .artifact-markup {
  background-color: transparent !important;
  overflow: hidden !important;
  touch-action: none;
}

.artifact-view[data-overlay-registered='true'] .artifact-object {
  opacity: calc(1 - 0.5 * var(--artifact-overlay-progress, 0));
}

.artifact-view .artifact-markup .code-view, .artifact-view .artifact-markup .code-view .code-gutter {
  background-color: var(--background-color-base) !important;
}

.artifact-view .artifact-markup [data-layer='markup'] .code-view {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.artifact-view .artifact-markup [data-service-id][data-active='false'], .artifact-view .artifact-object [data-service-id][data-active='false'] {
  display: none;
}

.artifact-view .artifact-footer {
  flex-shrink: 0;
  justify-content: flex-end;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  min-height: var(--min-size-interactive-touch);
  box-sizing: border-box;
  border-block-start: var(--border-width-base) solid var(--border-color-subtle);
}

.artifact-view .artifact-canvas-label {
  font-size: var(--font-size-medium-16);
  color: var(--color-subtle);
  flex: 1;
  min-width: 0;
  padding-inline-start: calc(var(--spacing-16) - var(--spacing-8) + 2 * var(--border-width-base));
}

.artifact-view .artifact-canvas-label {
  white-space: nowrap;
  text-overflow: clip;
  --edge-fade-start: 0px;
  --edge-fade-end: var(--size-edge-fade);
}

.artifact-view .artifact-canvas-label {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.artifact-view .artifact-canvas-label::-webkit-scrollbar {
  display: none !important;
}

.artifact-view .artifact-canvas-label[data-overflowing-start='true'] {
  --edge-fade-start: var(--size-edge-fade);
}

.artifact-view .artifact-canvas-label[data-overflowing-end='false'] {
  --edge-fade-end: 0px;
}

.artifact-view .artifact-canvas-label[data-overflowing='true']:not([data-edge-fade-expanded='true']) {
  mask-image: linear-gradient(to right, transparent, black var(--edge-fade-start), black calc(100% - var(--edge-fade-end)), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--edge-fade-start), black calc(100% - var(--edge-fade-end)), transparent);
}

.artifact-view .artifact-canvas-label[data-overflowing='true']:not([data-edge-fade-expanded='true']):dir(rtl) {
  mask-image: linear-gradient(to left, transparent, black var(--edge-fade-start), black calc(100% - var(--edge-fade-end)), transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, black var(--edge-fade-start), black calc(100% - var(--edge-fade-end)), transparent);
}

.artifact-view .artifact-canvas-label[data-edge-fade-expanded] {
  cursor: pointer;
}

.artifact-view .artifact-canvas-label[data-edge-fade-expanded='true'] {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  flex-wrap: wrap !important;
}

.artifact-view .artifact-canvas-label[data-edge-fade-view='expand']:has(:focus-visible), .artifact-view .artifact-canvas-label[data-edge-fade-view='expand']:is(:focus-visible *) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  flex-wrap: wrap !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.artifact-view .artifact-fullscreen-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-size-interactive-touch);
  height: var(--min-size-interactive-touch);
  border-radius: var(--border-radius-base);
  border: none;
  background-color: transparent;
  color: var(--color-subtle);
  cursor: pointer;
  flex-shrink: 0;
}

.artifact-view .artifact-fullscreen-button:hover {
  color: var(--color-base);
}

.artifact-view .artifact-fullscreen-exit, .artifact-view:fullscreen .artifact-fullscreen-enter {
  display: none;
}

.artifact-view:fullscreen .artifact-fullscreen-exit {
  display: flex;
}

@media (max-width: 479px) {
  .artifact-view {
    min-width: min-content !important;
  }

.artifact-view .artifact-footer {
    min-width: max-content !important;
  }

.artifact-view > :not(.artifact-footer) {
    contain: inline-size;
  }

:root[data-phone-step='down'] .artifact-view .artifact-fullscreen-button {
    width: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    height: calc(((var(--spacing-4) * 2) + var(--line-height-small-22)) + (var(--border-width-base) * 2)) !important;
    --size-icon-small: var(--font-size-small-14) !important;
  }
}