.stage {
  height: 100dvh;
}

.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: right .2s ease;
}

.panel-open .floating-actions {
  right: 433px;
}

.floating-actions .fab {
  position: static;
  width: 52px;
  height: 52px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.floating-actions .fab svg {
  width: 22px;
  height: 22px;
}

.floating-actions .share-fab {
  color: #173f42;
  background: #fff;
  border: 1px solid #b9c8c5;
}

.floating-actions .share-fab:hover {
  color: #fff;
  background: #244c50;
  border-color: #244c50;
}

.floating-actions .share-fab[disabled] {
  cursor: not-allowed;
  color: #93a09c;
  background: #e9edeb;
  border-color: #d4dbd8;
  box-shadow: none;
}

.floating-actions .share-fab.working svg {
  animation: share-pulse .7s ease-in-out infinite alternate;
}

@keyframes share-pulse {
  to { opacity: .35; }
}

.panel {
  top: 24px;
  bottom: 24px;
  padding-bottom: 0;
}

.carousel {
  position: relative;
  margin: 0 0 22px;
}

.carousel-window {
  overflow: hidden;
  border-radius: 9px;
}

.concepts {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  margin: 0;
  transition: transform .28s ease;
}

.concept {
  flex: 0 0 100%;
  width: 100%;
  border: 0;
  border-radius: 9px;
  cursor: default;
  background: #f2f4f2;
}

.concept img {
  aspect-ratio: 1;
}

.concept span {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.concept[aria-pressed=true] {
  border: 0;
}

.text-concept {
  display: flex;
  min-height: 250px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: #eef2f0;
}

.text-concept span {
  padding: 0;
  font-size: 22px;
  line-height: 1.2;
  max-width: 250px;
}

.text-concept small {
  margin: 12px 0 0;
}

.carousel-nav {
  position: absolute;
  z-index: 2;
  top: calc(50% - 22px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #183c3fdd;
  box-shadow: 0 4px 14px #142c2e35;
  font-size: 28px;
  line-height: 1;
}

.carousel-nav:hover {
  background: #286469;
}

.carousel-nav.previous {
  left: 10px;
}

.carousel-nav.next {
  right: 10px;
}

.apply:disabled {
  cursor: not-allowed;
  color: #8b9692;
  background: #dfe5e2;
}

.sticky-apply {
  position: sticky;
  z-index: 4;
  bottom: 0;
  margin: 18px -24px 0;
  padding: 14px 24px 24px;
  background: linear-gradient(180deg, #ffffff00, #fff 18px);
}

.panel-footer {
  padding-bottom: 0;
}

.shared-view .floating-actions,
.shared-view .panel,
.shared-view .preview-label {
  display: none !important;
}

.shared-view .stage {
  background: #f4f2ee;
}

@media (max-width: 650px) {
  .stage {
    height: 100dvh;
  }

  .floating-actions {
    right: 14px;
    bottom: 14px;
  }

  .floating-actions .fab {
    width: 48px;
    height: 48px;
    padding: 0;
  }

  .panel {
    top: 12px;
    right: 12px;
    bottom: 12px;
  }

  .sticky-apply {
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 820px) {
  .panel-open .floating-actions {
    display: none;
  }
}

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