:root {
  --task-app-width: 393px;
  --task-app-height: 852px;
  --task-app-tabbar-height: 50px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.task-app-shell,
.prototype-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #000;
}

.task-app-phone,
.phone {
  position: relative;
  width: min(var(--task-app-width), calc(100vw - 32px));
  max-width: none;
  height: min(var(--task-app-height), calc(100vh - 32px));
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid #202020;
  background-color: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68);
}

.task-app-frame,
.app {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.task-tabbar-host {
  height: var(--task-app-tabbar-height);
  flex: 0 0 var(--task-app-tabbar-height);
}

/* 首页的内容采用绝对定位，底栏在手机画布底部独立占位。 */
.task-app-phone > .task-tabbar-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.task-app-tabbar {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid #202020;
  background: rgba(8, 8, 8, .96);
}

.task-app-tab {
  min-width: 0;
  padding-top: 6px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  color: #606060;
  text-decoration: none;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
}

.task-app-tab svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-app-tab.is-active { color: #f2f2f2; }

@media (max-width: 520px) {
  .task-app-shell,
  .prototype-shell {
    display: block;
    padding: 0;
  }

  .task-app-phone,
  .phone {
    width: 100vw;
    height: 100dvh;
    border: 0;
    box-shadow: none;
  }

  .project-back-link { display: none !important; }
}