/* Both entry points share the same stage. Only their content scrolls. */
html, body {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
body, .stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
#studio, .stage > .device {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
@media (min-width: 600px) {
  #studio, .stage > .device {
    max-width: 402px;
    max-height: 874px;
  }
}

/* Shared navigation for the studio and store tools. */
.rumi-dock {
  position: absolute;
  inset: auto 20px max(20px, env(safe-area-inset-bottom));
  height: 62px;
  display: flex;
  gap: 8px;
  color: white;
}
.rumi-dock[hidden] { display: none; }
.rumi-dock .tabs, .rumi-dock .plus {
  box-sizing: border-box;
  background: #282828bd;
  border: 1px solid #ffffff20;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 40px;
}
.rumi-dock .tabs { display: flex; flex: 1; min-width: 0; padding: 3px 7px; }
.rumi-dock .tabs button {
  flex: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 650;
  border-radius: 34px;
}
.rumi-dock .active { background: #ffffff28; }
.rumi-dock .plus { width: 62px; display: grid; place-items: center; }
.rumi-dock svg { width: 24px; height: 24px; }
.rumi-dock .plus svg { width: 28px; height: 28px; }