.shell {
  width: min(var(--shell-w), 100vw);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg-app);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-lg);
  position: relative;
}

.screen {
  min-height: 100svh;
  padding: max(var(--sp-l), env(safe-area-inset-top)) var(--sp-l) calc(var(--nav-h) + var(--sp-xl) + env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  gap: var(--sp-l);
}

.screen.center {
  place-content: center;
  text-align: center;
}

.bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-m);
  min-height: 44px;
}

.bar h1 {
  text-align: center;
}

.feed,
.templates {
  display: grid;
  gap: var(--sp-m);
}

.creator {
  display: grid;
  gap: var(--sp-m);
}

.creator label {
  display: grid;
  gap: var(--sp-s);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-13);
}

.meters {
  width: 100%;
  display: grid;
  gap: var(--sp-s);
}

.meters label {
  display: grid;
  gap: var(--sp-xs);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

@media (max-width: 430px) {
  .shell {
    width: 100vw;
    box-shadow: none;
  }
}