:root {
  --max-text-line-width: 100ex;
}

html,
body {
  overscroll-behavior: none;
  font-family: system-ui, sans-serif;
}

html {
  font-size: 16px;
  height: 100%;
  height: 100vh;
  height: 100dvh;

  @media all and (display-mode: standalone) {
    height: 100lvh;
  }
}

@media all and (display-mode: window-controls-overlay) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(titlebar-area-height, 0px);
    background-color: oklch(98% 0 0);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    z-index: 9999;
    -webkit-app-region: drag;
    app-region: drag;

    @media (prefers-color-scheme: dark) {
      background-color: oklch(23.26% 0.014 253.1 / 85%);
    }
  }
}

patchwork-view {
  display: block;
  height: 100%;
  width: 100%;
  contain: layout;
}

body patchwork-view#root {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;

  @media all and (display-mode: standalone) {
    height: 100lvh;
    width: 100lvw;
  }
}

.sidebar-toggle {
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  width: 2px;
  z-index: 1;
  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 100%;
    margin-left: -10px;
  }
  &:hover {
    background: currentColor;
  }
}

.tl-watermark_SEE-LICENSE {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}