/* RESET */
._host_1upod_1 {
  /* FONT TWEAKS */
  font-synthesis: none;

  /* STACKING CONTEXT */
  isolation: isolate;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* RESETS */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    display: block;
    margin: 0;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
  }

  style,
  script,
  head *,
  [hidden] {
    display: none;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  input,
  button,
  [role='button'],
  textarea,
  select {
    font: inherit;
  }

  button,
  [role='button'] {
    width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    font: inherit;
    line-height: normal;
    color: inherit;
    background: transparent;
    border: none;
  }

  ._miru--slider_1upod_1 {
    overflow: hidden;
    appearance: none;
    touch-action: none;
    cursor: pointer;

    &:focus {
      outline: none;
    }

    &::-moz-range-track {
      height: 100%;
    }

    &::-moz-range-thumb {
      height: 100%;
      border: none;
      border-radius: 0;
    }

    &::-moz-range-progress {
      height: 100%;
    }
  }

  ._miru--slider_1upod_1::-webkit-slider-thumb {
    width: 0.35rem;
    height: 200px;
    margin-top: -80px;
    appearance: none;
  }
}
._host_1upod_1 {
  /* SCALE */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;

  /* BUTTON SIZE */
  --height-menu-row: 4rem;
  --height-menu-row-scroll: 8rem;
  --size-button-icon: 1.25rem;
  --roundness-button: 0.25rem;
  --height-slider: 0.6rem;
  --width-slider-thumb: 2.5rem;
  --gap-default: 1rem;
  --gap-preview: 1rem;

  /* COLOR SCHEMES */
  color-scheme: light dark;
}
/* LIGHT */
._host_1upod_1[color-scheme='light'] {
  --theme-hue: 204;
  --theme-hue-acc: 326;

  /* BACKGROUND-COLOR */
  --color-bg-preview: hsl(var(--theme-hue) 40% 80%);
  --color-bg-button: hsl(var(--theme-hue) 40% 94%);
  --color-bg-button-hover: hsl(var(--theme-hue) 90% 97%);
  --color-bg-acc: hsl(var(--theme-hue) 90% 99%);

  /* COLOR */
  --color-fnt-default: hsl(var(--theme-hue) 5% 30%);
  --color-fnt-acc: hsl(var(--theme-hue-acc) 60% 50%);

  /* SCROLLBAR COLOR */
  --color-scrollbar-thumb: hsl(var(--theme-hue) 10% 50%);
  --color-scrollbar-both: hsl(var(--theme-hue) 10% 50%) transparent;

  /* SLIDER COLOR */
  --color-slider-thumb: hsl(var(--theme-hue-acc) 60% 50%);
  --color-slider-progress: hsl(var(--theme-hue-acc) 20% 75%);
  --color-slider-track: hsl(var(--theme-hue) 5% 80%);

  /* CROPPER COLOR */
  --color-crop-outline: hsl(var(--theme-hue) 100% 90%);
  --color-crop-dashed: hsl(var(--theme-hue) 50% 90% / 87.1%);
  --color-crop-overlay: hsl(var(--theme-hue) 40% 80% / 51%);
}
/* DARK */
._host_1upod_1[color-scheme='dark'] {
  --theme-hue: 204;
  --theme-hue-acc: 326;

  /* BACKGROUND-COLOR */
  --color-bg-preview: hsl(var(--theme-hue) 20% 10%);
  --color-bg-button: hsl(var(--theme-hue) 100% 3%);
  --color-bg-button-hover: hsl(var(--theme-hue) 10% 17%);
  --color-bg-acc: hsl(var(--theme-hue) 10% 12%);

  /* COLOR */
  --color-fnt-default: hsl(var(--theme-hue) 5% 60%);
  --color-fnt-acc: hsl(var(--theme-hue-acc) 80% 40%);

  /* SCROLLBAR COLOR */
  --color-scrollbar-thumb: hsl(var(--theme-hue) 10% 50%);
  --color-scrollbar-both: hsl(var(--theme-hue) 10% 50%) transparent;

  /* SLIDER COLOR */
  --color-slider-thumb: hsl(var(--theme-hue-acc) 80% 40%);
  --color-slider-progress: hsl(var(--theme-hue-acc) 40% 20%);
  --color-slider-track: hsl(var(--theme-hue) 10% 15%);

  /* CROPPER COLOR */
  --color-crop-outline: hsl(var(--theme-hue) 100% 90%);
  --color-crop-dashed: hsl(var(--theme-hue) 50% 90% / 87.1%);
  --color-crop-overlay: hsl(var(--theme-hue) 20% 10% / 51%);
}
/* PIXELFED */
._host_1upod_1[color-scheme='pixelfed'] {
  /* BACKGROUND-COLOR */
  --color-bg-button: var(--light);
  --color-bg-preview: var(--light-gray);
  --color-bg-button-hover: var(--light-gray);
  --color-bg-acc: var(--card-bg);

  /* COLOR */
  --color-fnt-default: var(--body-color);
  --color-fnt-acc: var(--text-lighter);

  /* SCROLLBAR COLOR */
  --color-scrollbar-thumb: var(--light-gray);
  --color-scrollbar-both: var(--light-gray) transparent;

  /* SLIDER COLOR */
  --color-slider-thumb: var(--text-lighter);
  --color-slider-progress: var(--card-bg);
  --color-slider-track: var(--light);

  /* --color-slider-border: var(--text-lighter); */

  /* CROPPER COLOR */
  --color-crop-outline: var(--light-gray);
  --color-crop-dashed: #ffffffde;
  --color-crop-overlay: #00000082;
}
/* PIXELFED VARS */
/* :root {
  --light: #000;
  --dark: #fff;
  --body-bg: #000;
  --body-color: #9ca3af;
  --nav-bg: #000;
  --bg-light: #212124;
  --light-gray: #212124;
  --text-lighter: #818181;
  --card-bg: #161618;
  --light-hover-bg: #212124;
  --btn-light-border: #161618;
  --input-border: #161618;
  --comment-bg: #212124;
  --border-color: #212124;
  --card-header-accent: #212124;
  --dropdown-item-hover-bg: #000;
  --dropdown-item-hover-color: #818181;
  --dropdown-item-color: #64748b;
  --dropdown-item-active-color: #fff;
} */
/* :root {
--light: #fff;
--dark: #000;
--body-bg: #f3f4f6;
--body-color: #212529;
--nav-bg: #fff;
--bg-light: #f8f9fa;
--primary: #3b82f6;
--light-gray: #f8f9fa;
--text-lighter: #94a3b8;
--card-bg: #fff;
--light-hover-bg: #f9fafb;
--btn-light-border: #fff;
--input-border: #e2e8f0;
--comment-bg: #eff2f5;
--border-color: #dee2e6;
--card-header-accent: #f9fafb;
--dropdown-item-hover-bg: #e9ecef;
--dropdown-item-hover-color: #16181b;
--dropdown-item-color: #64748b;
--dropdown-item-active-color: #334155;
} */
/* MAIN CONTAINERS */
._host_1upod_1 {
  /* SIZE */
  max-height: 90vh;
}
/* UNUSED ELEMENTS */
._miru--unused_1upod_1 {
  display: none;
}
/* MAIN FLEX CONTAINERS */
._host_1upod_1,
._miru--main_1upod_1 {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}
/* CENTER WRAPPER */
._miru--center_1upod_1 {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;

  /* CROPPER SPECIFIC PREVIEW WRAPPER */
  ._miru--cropper-container_1upod_1 {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;

    ._cropper-drag-box_1upod_1 {
      opacity: 1;
    }
  }
}
/* IMAGE PREVIEW */
._miru--preview_1upod_1 {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  padding: var(--gap-preview);

  & > canvas {
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
  }
}
/* MENU */
._miru--menu_1upod_1 {
  display: flex;
  flex-direction: column;

  /* MENU BUTTON ROW */
  ._miru--menu__row_1upod_1 {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-around;
    height: var(--height-menu-row);
    overflow-y: hidden;
  }

  ._miru--menu__slider-row_1upod_1 {
    grid-template-columns: 1fr 4fr 1fr;
  }

  /* MENU BUTTON ROW SCROLLABLE */
  ._miru--menu__row--scroll_1upod_1 {
    grid-auto-columns: 1fr;
    gap: var(--gap-default);
    justify-content: unset;
    height: var(--height-menu-row-scroll);
    padding-top: var(--gap-default);
    padding-right: 50%;
    padding-bottom: calc(0.5rem + var(--gap-default)) !important;
    padding-left: 50%;
    overflow: scroll hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    ._miru--button_1upod_1 {
      flex-shrink: 0;
      scroll-snap-align: center;
    }
  }
}
._miru--filter-preview_1upod_1 {
  z-index: 0;

  canvas {
    z-index: -1;
    transform: scaleY(-1);
  }
}
/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 40px; /* Set to a large value */
}
/* MODULE BUTTON */
._host_1upod_1 {
  &[show-labels='false'] ._miru--button_1upod_1:has(._miru--button__icon_1upod_1) {
    ._miru--button__label_1upod_1 {
      display: none;
    }

    ._miru--button__icon_1upod_1 {
      margin-bottom: 0 !important;
    }
  }
}
/* BUTTON */
._miru--button_1upod_1 {
  position: relative;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  cursor: pointer;

  border-radius: var(--roundness-button);

  &[disabled] {
    pointer-events: none;
    opacity: 0.8;
  }

  &:focus-visible {
    outline-offset: -4px;
  }

  &._miru--mark-disabled_1upod_1 {
    text-decoration: line-through;
  }

  &._miru--small_1upod_1 {
    flex-grow: 0;
    flex-shrink: 0;
  }

  /* BUTTON ICON */
  ._miru--button__icon_1upod_1 {
    margin-right: auto;
    margin-left: auto;
    font-size: var(--size-button-icon);
  }

  /* BUTTON WITH CANVAS */
  &:has(canvas) {
    box-sizing: border-box;
    display: flex;
    flex-basis: calc(var(--height-menu-row-scroll) - 1rem);
    flex-direction: column;
    width: calc(var(--height-menu-row-scroll) - 1rem);
    height: 100%;

    border: 2px solid transparent;

    canvas {
      flex-grow: 1;
      width: 100%;
      height: 1rem;
      object-fit: cover;
    }

    /* BUTTON ACTIVE AND HOVER */
    &._miru--acc_1upod_1 {
      border: 2px solid;
    }

    &._miru--hov_1upod_1:not(._miru--acc_1upod_1) {
      border: 2px solid;
    }

    /* &:not(.miru--hov):not(.miru--acc) canvas{
        height: calc(100% - 1.75rem) ;
        flex-grow: 0;
      } */
  }

  /* BUTTON LABEL */
  ._miru--button__label_1upod_1 {
    margin: auto;
    margin-top: 0.2em;

    /* margin-left: .2em;
    margin-right: .2em; */
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  &:has(canvas) ._miru--button__label_1upod_1 {
    margin-top: 0;
    line-height: calc(1em + var(--gap-default));
  }

  /* ENABLED MARKER */
  &._miru--enabled_1upod_1::after {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: calc(50% - 1.5rem);
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    content: '';
    border-radius: 50%;
  }
}
/* MODULE PRELOADER */
/* PRELOADER */
._miru--loading_1upod_1 {
  position: relative;
  width: 5rem;
  max-height: 5rem;
  margin: auto;

  &::after {
    position: absolute;
    top: calc(50% - var(--size-button-icon) / 2);
    left: calc(50% - var(--size-button-icon) / 2);
    z-index: 999;
    display: block;
    width: var(--size-button-icon);
    height: var(--size-button-icon);
    content: '';
    border: 2px solid;
    border-radius: 50%;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
    transform-origin: center;
  }
}
/* MODULE SLIDER */
._miru--menu__row_1upod_1:has(._miru--slider_1upod_1[disabled]) {
  pointer-events: none;

  /* display: none; */
  opacity: 0;
}
/* SLIDER */
._miru--slider_1upod_1 {
  flex-grow: 1;
  height: calc(100% - 2 * var(--gap-default));
  background-clip: padding-box;
  border-top: calc(var(--height-menu-row) / 2 - var(--height-slider) / 2 - var(--gap-default)) solid
    transparent;
  border-right: var(--gap-default) solid transparent;
  border-bottom: calc(var(--height-menu-row) / 2 - var(--height-slider) / 2 - var(--gap-default)) solid
    transparent;
  border-left: var(--gap-default) solid transparent;

  &::-moz-range-thumb {
    width: var(--width-slider-thumb);
  }

  &[value_current='0'] {
    opacity: 0.5;
  }
}
::-webkit-slider-thumb {
  width: var(--width-slider-thumb) !important;
}
._miru--slider-label_1upod_1 {
  flex-grow: 0;
  flex-basis: 5rem;
  overflow: hidden;
  text-align: center;
}
._host_1upod_1 {
  /* APP COLORS */
  color: var(--color-fnt-default);

  /* SCROLLBARS */
  scrollbar-color: var(--color-scrollbar-both);
  background-color: var(--color-bg-button);

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar-thumb);
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* PREVIEW */
  ._miru--preview_1upod_1 {
    background-color: var(--color-bg-preview);
  }

  /* MENU */
  ._miru--menu_1upod_1 {
    background-color: var(--color-bg-button);
  }

  /* BUTTON */
  ._miru--button_1upod_1 {
    color: var(--color-fnt-default);
    background-color: var(--color-bg-button);
  }

  /* BUTTON ACTIVE */
  ._miru--button_1upod_1._miru--acc_1upod_1 {
    background-color: var(--color-bg-acc);
    border-color: var(--color-fnt-acc);
  }

  /* BUTTON HOVER */
  ._miru--button_1upod_1:not(._miru--acc_1upod_1, :has(canvas)):hover,
  ._miru--hov_1upod_1:not(._miru--acc_1upod_1) {
    background-color: var(--color-bg-button-hover);
    border-color: transparent;
  }

  /* BUTTON ENABLED */
  ._miru--button_1upod_1._miru--enabled_1upod_1::after {
    background-color: var(--color-fnt-acc);
  }

  /* SLIDER */
  ._miru--slider_1upod_1 {
    background-color: var(--color-slider-track);
    border-color: var(--color-bg-button); /* sets the background color of the area around the slider */
    &::-moz-range-thumb {
      background-color: var(--color-slider-thumb);
    }

    &::-moz-range-progress {
      background-color: var(--color-slider-progress);
    }
  }

  ._miru--slider_1upod_1::-webkit-slider-thumb {
    /* seems like this does not like & nesting */
    background-color: var(--color-slider-thumb);
    box-shadow: -4000px 0 0 4000px var(--color-slider-progress);
  }

  /* CROPPER */
  .cropper-container {
    .cropper-view-box {
      outline-color: var(--color-crop-outline);
    }

    .cropper-dashed {
      border-color: var(--color-crop-dashed);
    }

    .cropper-drag-box {
      background-color: var(--color-crop-overlay);
    }
  }
}
/* BUTTON */
._miru--button_1upod_1 {
  transition:
    color 0.25s,
    background-color 0.25s;
}
/* BUTTON HOVER */
._miru--button_1upod_1:hover,
._miru--hov_1upod_1:not(._miru--acc_1upod_1) {
  transition:
    color 0.015s,
    background-color 0.015s;
}
/* PRELOADER */
._miru--loading_1upod_1::after {
  animation: _miru-spinner_1upod_1 2s linear infinite;
}
@keyframes _miru-spinner_1upod_1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
._miru--menu__row_1upod_1 {
  transition: all 1s;
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.cropper-container img {
    backface-visibility: hidden;
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
  }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
  }

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
  }

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
  .cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
  }

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
  }

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
  }

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
  }

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
  }

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
  }

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
  }

@media (min-width: 768px) {

.cropper-point.point-se {
      height: 15px;
      width: 15px;
  }
    }

@media (min-width: 992px) {

.cropper-point.point-se {
      height: 10px;
      width: 10px;
  }
    }

@media (min-width: 1200px) {

.cropper-point.point-se {
      height: 5px;
      opacity: 0.75;
      width: 5px;
  }
    }

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
  }

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}