:root {
  --mobile-shell-touch: 44px;
}

.mobile-shell-home {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line, rgba(141, 167, 174, .35));
  border-radius: 6px;
  background: transparent;
  color: var(--text, #e8f2f4);
  text-decoration: none;
  font: 22px/1 "Segoe UI Symbol", "Microsoft YaHei", sans-serif;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.mobile-shell-home:hover,
.mobile-shell-home:focus-visible {
  border-color: var(--cyan, #58d7dc);
  background: rgba(88, 215, 220, .08);
  color: var(--cyan, #58d7dc);
  outline: none;
}

.brand > div,
.brand > span {
  min-width: 0;
}

.brand h1,
.topbar h1,
.top h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports (height: 100dvh) {
  .app {
    min-height: 100dvh !important;
  }

  .app.mobile-shell-fixed-app {
    height: 100dvh !important;
  }
}

@media (max-width: 920px) {
  .topbar,
  .top {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .sidebar,
  .side {
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 680px), (max-height: 500px) {
  .mobile-shell-home {
    width: var(--mobile-shell-touch);
    height: var(--mobile-shell-touch);
  }

  button,
  select,
  .button,
  .icon-button,
  .play-button,
  .segment,
  .segmented button,
  .tab,
  .load-tab,
  .preset,
  .k-inf {
    min-height: var(--mobile-shell-touch) !important;
  }

  .icon-button {
    min-width: var(--mobile-shell-touch) !important;
  }

  label.check,
  label.check-row,
  .check,
  .check-row {
    min-height: var(--mobile-shell-touch) !important;
  }

  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex: none;
  }

  input[type="range"] {
    width: 100% !important;
    height: var(--mobile-shell-touch) !important;
    min-height: var(--mobile-shell-touch) !important;
    margin-top: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: linear-gradient(#29434d, #29434d) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 4px !important;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border: 0;
    border-radius: 99px;
    background: #29434d;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 22px !important;
    height: 22px !important;
    margin-top: -9px;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 2px solid var(--surface, #0d1b22) !important;
    border-radius: 50% !important;
    background: var(--cyan, #58d7dc) !important;
    box-shadow: 0 0 0 1px rgba(88, 215, 220, .58) !important;
  }

  input[type="range"]::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 99px;
    background: #29434d;
  }

  input[type="range"]::-moz-range-thumb {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid var(--surface, #0d1b22) !important;
    border-radius: 50% !important;
    background: var(--cyan, #58d7dc) !important;
    box-shadow: 0 0 0 1px rgba(88, 215, 220, .58) !important;
  }

  .fixed input[type="range"]::-webkit-slider-thumb {
    background: var(--amber, #f6b45c) !important;
    box-shadow: 0 0 0 1px rgba(246, 180, 92, .58) !important;
  }

  .fixed input[type="range"]::-moz-range-thumb {
    background: var(--amber, #f6b45c) !important;
    box-shadow: 0 0 0 1px rgba(246, 180, 92, .58) !important;
  }

  canvas.mobile-shell-scene {
    touch-action: pan-y !important;
  }
}

@media (max-width: 360px) {
  html,
  body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app {
    max-width: 100% !important;
  }

  .brand-mark,
  .mark {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-shell-home {
    transition: none;
  }
}