.nest-app-shell {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--topbar-height, 64px));
  background: #f7f7f5;
}

.nest-app-frame {
  display: block;
  width: 100%;
  min-height: calc(100dvh - var(--topbar-height, 64px));
  border: 0;
  background: #fff;
}

.page-host.nest-app-active {
  padding: 0;
  overflow: hidden;
}

.page-host.nest-app-active .nest-detail-shell,
.page-host.nest-app-active .nest-app-shell,
.page-host.nest-app-active .nest-app-frame {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.page-host.nest-app-active > .settings-back-button {
  display: none;
}

.demo-nest-shell {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.demo-nest-toolbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid rgba(24, 24, 27, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: #27272a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.demo-nest-toolbar strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-nest-back {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(24, 24, 27, 0.14);
  border-radius: 9px;
  background: #fff;
  color: #27272a;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.page-host.nest-app-active .demo-nest-shell .demo-nest-frame {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
}

.app-shell[data-active-tab="nest"]:is(
    [data-active-section^="demo"],
    [data-active-section="togetherRelationship"],
    [data-active-section="togetherNightDiary"],
    [data-active-section="togetherTimeCapsule"],
    [data-active-section="togetherCooking"],
    [data-active-section="togetherWalk"],
    [data-active-section="limen"],
    [data-active-section="singAlong"]
  ) .topbar,
.app-shell[data-active-tab="nest"]:is(
    [data-active-section^="demo"],
    [data-active-section="togetherRelationship"],
    [data-active-section="togetherNightDiary"],
    [data-active-section="togetherTimeCapsule"],
    [data-active-section="togetherCooking"],
    [data-active-section="togetherWalk"],
    [data-active-section="limen"],
    [data-active-section="singAlong"]
  ) .bottom-nav {
  display: none;
}

.app-shell[data-active-tab="nest"]:is(
    [data-active-section^="demo"],
    [data-active-section="togetherRelationship"],
    [data-active-section="togetherNightDiary"],
    [data-active-section="togetherTimeCapsule"],
    [data-active-section="togetherCooking"],
    [data-active-section="togetherWalk"],
    [data-active-section="limen"],
    [data-active-section="singAlong"]
  ) .main-area,
.app-shell[data-active-tab="nest"]:is(
    [data-active-section^="demo"],
    [data-active-section="togetherRelationship"],
    [data-active-section="togetherNightDiary"],
    [data-active-section="togetherTimeCapsule"],
    [data-active-section="togetherCooking"],
    [data-active-section="togetherWalk"],
    [data-active-section="limen"],
    [data-active-section="singAlong"]
  ) .page-host {
  height: 100dvh;
  min-height: 100dvh;
}

@supports not selector(:is(*)) {
  .page-host.nest-app-active {
    min-height: 100dvh;
  }
}