/* A third independent studio, above Button styles and Glass studio. */
.use-case-studio {
  --ucs-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 54px);
  position: fixed;
  z-index: 960;
  right: max(20px, env(safe-area-inset-right));
  bottom: var(--ucs-bottom);
  pointer-events: none;
  color: #22282d;
  font: 400 13px/1.4 Selecta, Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
}
body:has(.glass-studio) .use-case-studio {
  --ucs-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 112px);
}
body:has(.button-studio.is-open, .glass-studio.is-open) .use-case-studio { visibility: hidden; }
.use-case-studio :is(button, input, select) { font: inherit; letter-spacing: inherit; }
.use-case-studio button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.use-case-studio .ucs-trigger { height: 44px; }
.use-case-studio .ucs-gem { width: 23px; height: 27px; border-radius: 7px; }
.use-case-studio .gs-panel {
  width: min(320px, calc(100vw - 40px));
  max-height: calc(100dvh - var(--ucs-bottom) - 76px);
  transition-duration: .2s, .25s, .25s;
}
.use-case-studio .gs-body { padding-top: 4px; padding-bottom: 18px; }
.use-case-studio .gs-select select { min-height: 36px; }
.use-case-studio .gs-toggle { min-height: 40px; }
.use-case-studio .gs-toggle input { width: 44px; height: 40px; }
.use-case-studio .gs-control input[type="range"] { height: 32px; }
.use-case-studio .gs-footer { padding-block: 8px; }
.use-case-studio .gs-footer button { min-height: 36px; }
.use-case-studio :is(button, input, select):focus-visible { outline: 2px solid #547e9d; outline-offset: 3px; }
.use-case-studio[data-instant="true"] :is(.gs-panel, .gs-trigger-plus) { transition: none; }
@media (max-width: 650px) {
  .use-case-studio {
    --ucs-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 46px);
    right: max(12px, env(safe-area-inset-right));
  }
  body:has(.glass-studio) .use-case-studio {
    --ucs-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px);
  }
  .use-case-studio .ucs-trigger { height: 38px; }
  .use-case-studio .gs-panel { width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - var(--ucs-bottom) - 62px); }
  .use-case-studio .gs-close { width: 40px; height: 40px; }
  .use-case-studio .gs-select select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .use-case-studio :is(.gs-panel, .gs-trigger-plus, .gs-switch, .gs-switch::after) { transition: none; }
}